1

AngularJS - すべてを選択してチェックした後、ng-click でチェックボックスをチェックすると、すべてチェックされますが、すべてをクリアしてもすべてがクリアされません。

オブジェクトのリストと Json 配列があります。チェックボックスをng-repeatで宣言しましたが、1つ以上のチェックボックスをチェックすると、チェックボックスが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);

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

解決しました。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 もありがとうございます

于 2016-08-02T11:29:17.547 に答える
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 に答える