javascript - angularJs全选复选BUG求助(先单选后全选反选后,再进行单选之前的值未清空)
迷茫
迷茫 2017-04-11 08:58:50
[JavaScript讨论组]

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title></title>

    <script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>

</head>

<body ng-app="app">
    <p ng-controller="myCtrl" class="container bg-color">
        <section>
            全选: <input type="checkbox" ng-model="master" ng-click="all(master,user)">
            <p ng-repeat="z in user">
                <input id={{z.id}} type="checkbox" ng-model="x" ng-checked="master" ng-click="checkd(z,x)">{{z.name}}
            </p>
            <button href="#" class="btn btn-danger" ng-click="delete()">批量操作</button>
            <span>{{choseArr}}</span> 
        </section>
    </p>
    <script>
        var app = angular.module('app', []);

        app.controller('myCtrl', function($scope){
            $scope.user=$scope.user=[{
                "id": "1",
                "code": "1",
                "name": "黄"
              },
              {
                "id": "2",
                "code": "2",
                "name": "红"
              },
              {
                "id": "3",
                "code": "12",
                "name": "绿"
              }];

            $scope.choseArr = [];
            var str = ""; 
            var len = $scope.user.length;
            var flag = '';
            $scope.x = false;
            $scope.all = function (c, v) {
                if (c == true) {
                    $scope.x = true;
                    var rst = [];
                    angular.forEach(v, function(data,index,array){
                        rst.push(data.id);
                    });
                    $scope.choseArr = rst;
                    flag = 'a';
                } else {
                    $scope.x = false;
                    $scope.choseArr = [];
                    flag = 'b';
                }

            };
            $scope.checkd = function(z, x) {
                if(flag == 'a') {

                    str = $scope.choseArr.join(',') + ',';
                }
                if(x == true) {
                    str = str + z.id + ',';
                    flag = 'c'
                    if($scope.choseArr.length == len - 1) {
                        $scope.master = true
                    }
                } else {

                    str = str.replace(z.id + ',', '');
                }

                $scope.choseArr = (str.substr(0, str.length - 1)).split(',');
                var dex = $scope.choseArr.indexOf("");
                if(dex >= 0) {
                    $scope.choseArr.splice(dex, 1);
                };
                if($scope.choseArr.length == 0) {
                    $scope.master = false
                };

            };
            $scope.delete = function() {

                if($scope.choseArr[0] == "" || $scope.choseArr.length == 0) {
                    alert("请至少选中一条数据在操作!")
                    return;
                }
                else{
                        console.log($scope.choseArr)    
                }

            };

        });
    </script>

</body>

</html>

迷茫
迷茫

业精于勤,荒于嬉;行成于思,毁于随。

全部回复(1)
PHPz

你试试把$scope.x = false 改成 $scope.x = { all: false} 然后用x.all 判断.应该和我之前看的demo是同一个,这个demo好像问题挺多的

热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新 English
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号