AngularJS

Question

AngularJS - 在我用 select 全部检查后用 ng-click 检查了复选框，它检查了所有，但清除所有并没有清除所有

我在 Json 数组中有一个对象列表。我已经用 ng-repeat 声明了复选框但是当我检查一个和多个复选框时 - 一个一个地检查它 selects 复选框然后如果我选择部分 select 全部，检查所有复选框, 用 select all 按钮，它 selects all 也。但是在我想 unselect all 之后，数组没有对象是真的。但是复选框的可视化仍然被选中，为什么？谁能帮我解决这个问题？

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

     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>

Answer 1

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);

        };
    }
]);

Answer 2

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

之后必须为空

如果我是你

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);
        };

Answer 3

已解决。我已将 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

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

AngularJS - Checkbox cheked with ng-click after i checked with select all it check all but Clearing all is not clears all

javascript

checkbox

angularjs-ng-repeat

angularjs-ng-checked