1

AngularJS - 在我检查全选后，用 ng-click 检查复选框，它检查所有，但清除所有不是清除所有

我有一个对象列表和 Json 数组。我已经用 ng-repeat 声明了复选框，但是当我检查一个和多个复选框时 - 一个一个地选择复选框，然后如果我选择要全选的部分，则选中所有复选框，使用全选按钮，它会全选还。但是在我想取消全选之后，数组没有对象是真的。但是仍然检查复选框的可视化，为什么？谁可以帮我这个事？

这是我关于复选框的编码部分

     var app = angular.module('myApp', []);
     app.controller('companyCtrl', ['$scope',
         function($scope) {
           $scope.addCompany = function(cmpid) {
             $scope.form.companies.push(cmpid);
           };
           $scope.Companies = [{
             "id": "001",
             "name": "Company1",
             "address": "Bla bla street, Somewhere City, Some Country"
           }, {
             "id": "002",
             "name": "Company2",
             "address": "Bla bla street, Somewhere City, Some Country"
           }, {
             "id": "003",
             "name": "Company3",
             "address": "Bla bla street, Somewhere City, Some Country"
           }, {
             "id": "004",
             "name": "Company4",
             "address": "Bla bla street, Somewhere City, Some Country"
           }, {
             "id": "005",
             "name": "Company5",
             "address": "Bla bla street, Somewhere City, Some Country"
           }, {
             "id": "006",
             "name": "Company6",
             "address": "Bla bla street, Somewhere City, Some Country"
           }];
           $scope.checkAll = function() {

             $scope.form.companies.splice(0, $scope.form.companies.length);
             $scope.all = true;
             for (var i in $scope.Companies) {
               $scope.addCompany($scope.Companies[i].id);
             }
             console.log($scope.form.companies);
           };

           $scope.uncheckAll = function() {
             $scope.form.companies.splice(0, $scope.form.companies.length);
             $scope.all = false;
             for (var i in $scope.Companies) {
               $scope.addCompany('');
             }

             console.log($scope.form.companies);

           };
         )
       ]
     };
<html>

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
</head>

<body ng-app="myApp">
  <div>
    <a href="#" ng-click="checkAll()">Select All</a>
    <a href="#" ng-click="uncheckAll()">Clear All</a>
  </div>
  <ul>
    <li ng-repeat="cmp in Companies">
      <div ng-if="cmp">
        <input id="{{'company-'+ $index}}" type="checkbox" ng-model="cmp.Selected" ng-click="addCompany(cmp.id)" ng-value="cmp.id" ng-checked="all || cmp.Selected" />
        <label for="{{'company-'+$index}}">
          <div class="title">{{cmp.name}}</div>
        </label>
      </div>
    </li>
  </ul>
</body>

</html>

4

3 回答 3

0 
var app = angular.module('myApp', []);
app.controller('companyCtrl', ['$scope',
    function($scope) {
        $scope.addCompany = function(cmpid) {
            $scope.form.companies.push(cmpid);
        };
        $scope.Companies = [
            {
                "id": "001",
                "name": "Company1",
                "address": "Bla bla street, Somewhere City, Some Country"
            },
            {
                "id": "002",
                "name": "Company2",
                "address": "Bla bla street, Somewhere City, Some Country"
            },
            {
                "id": "003",
                "name": "Company3",
                "address": "Bla bla street, Somewhere City, Some Country"
            },
            {
                "id": "004",
                "name": "Company4",
                "address": "Bla bla street, Somewhere City, Some Country"
            },
            {
                "id": "005",
                "name": "Company5",
                "address": "Bla bla street, Somewhere City, Some Country"
            },
            {
                "id": "006",
                "name": "Company6",
                "address": "Bla bla street, Somewhere City, Some Country"
            }
        ];
        $scope.checkAll = function() {

            $scope.form.companies.splice(0, $scope.form.companies.length);
            $scope.all = true;
            for (var i in $scope.Companies) {
                $scope.addCompany($scope.Companies[i].id);
            }
            console.log($scope.form.companies);
        };

        $scope.uncheckAll = function() {
            $scope.form.companies.splice(0, $scope.form.companies.length);
            $scope.all = false;
            for (var i in $scope.Companies) {
                $scope.addCompany('');
            }

            console.log($scope.form.companies);

        };
    }
]);
于 2016-07-29T12:04:00.373 回答
0

ng-check all || cmp.Selected你打电话后写的，所以uncheckAll你也必须清除cmp.Selected。在 unCheckAll 函数中，您将不必要的项目添加到 $scope.form.companies，我认为在 unCheckAll 之后 $scope.form.companies 必须为空。

如果我是你

html

ng-checked="cmp.Selected"

js

         $scope.checkAll = function() {
            $scope.form.companies.splice(0, $scope.form.companies.length);
            _.each($scope.Companies, function(comp){
                 comp.Selected = true;
                 $scope.addCompany(comp.id);
            });
            console.log($scope.form.companies);
        };

        $scope.uncheckAll = function() {
            $scope.form.companies.splice(0, $scope.form.companies.length);
            _.each($scope.Companies, function(comp){
                 comp.Selected = false;
            });
            console.log($scope.form.companies);
        };
于 2016-07-29T15:20:22.397 回答
0

解决。我已将 uncheck-all 函数的 for 循环更改为 angular forEach，而不是解决了我的问题，addCompany() 函数也几乎没有变化；

$scope.checkAll = function() {
        $scope.form.companies.splice(0, $scope.form.companies.length);
        $scope.all = true;
        angular.forEach($scope.Companies, function (cmp) {
          cmp.Selected = $scope.all;
          $scope.addCompany(cmp.id);
        });
};

$scope.uncheckAll = function() {
        $scope.form.companies.splice(0, $scope.form.companies.length);
        $scope.all = false;
        angular.forEach($scope.Companies, function (cmp) {
            cmp.Selected = $scope.all;
            $scope.addCompany('');
        });
        console.log($scope.form.companies);
    };

还更新了 addCompany() 函数，如下所示；

$scope.addCompany = function (cmpid){
    $scope.latestCompanies =
    {
       "id": cmpid,
    };
    if(cmpid === '' || cmpid === null){
      $scope.form.companies= [];
      console.log(JSON.stringify($scope.form));
    }else {
      $scope.form.companies.push($scope.latestCompanies);
    }

  };

也谢谢@keklikhasan 提醒我使用 forEach

于 2016-08-02T11:29:17.547 回答