Question

AngularJS - 在我选中所有选中后，用ng-click取消了复选框，它会检查所有内容，但清除所有内容并非全部清除

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

以下是关于复选框

的编码部分

＆＃13;

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

＆＃13;

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

＆＃13;

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 - Checkbox在我检查后用ng-click取消了所有它检查所有但是清除所有并不是全部清除

3 个答案: