AngularJS - 複選框與ng-click cheking與我選中後檢查全部選中所有，但清除所有不清除全部

AngularJS - 複選框與ng-click cheking與檢查後選擇所有，它檢查所有，但清除所有是不清除所有AngularJS - 複選框與ng-click cheking與我選中後檢查全部選中所有，但清除所有不清除全部

我有一個列表中的對象和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>

來源

2016-07-29 Sungur Bilgen

解決。我已經將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-02 11:29:17

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-29 12:04:00 ksav

你這樣叫uncheckAll你要清楚cmp.Selected太后寫道ng-check all || cmp.Selected的一部分。而在unCheckAll函數中，您將不必要的項目添加到$ scope.form.companies，我認爲$ scope.form.companies在unCheckAll後必須爲空。

如果我是你

HTML

ng-checked="cmp.Selected"

  $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-29 15:20:22 keklikhasan

我使用[下劃線]（http://underscorejs.org/）而不是爲（數組VAR項目） – keklikhasan

謝謝您的提醒我使用forEach循環。 @keklikhasan –

AngularJS - 複選框與ng-click cheking與我選中後檢查全部選中所有，但清除所有不清除全部

回答

相關問題