在angularjs中单击按钮（检查选定的电话）后，如何取消选中所有复选框？

Question

Here i have added my code below.after Check selected phones button clicked how to uncheck all checked checkboxes pls some one help me out for this . Expectation: after button click all checkboxes should unchecked i have added fiddle also help me out

 var myApp = angular.module('myApp',[]); myApp.controller('MyCtrl', function($scope,$http) { $scope.selectedBrands = []; $scope.selectBrand = function(selectedphone) { // If we deselect the brand if ($scope.selectedBrands.indexOf(selectedphone.brandname) === -1) { // Deselect all phones of that brand angular.forEach($scope.phones, function(phone) { if (phone.brandname === selectedphone.brandname) { phone.selected = false; } }); } } $scope.checkSelectedphones = function() { var modelNames = []; var jsonArr = []; var subModelArr = []; var aletrMsg = ''; angular.forEach($scope.phones, function(phone) { if (phone.selected) { modelNames.push(phone); var found = jsonArr.some(function(el) { if (el.model === phone.brandname) { el.subModel.push(phone.modelname); return true; } }); if (!found) { subModelArr.push(phone.modelname); jsonArr.push({ model: phone.brandname, brand :'Nokia', subModel: subModelArr, city:'Noida', }); subModelArr=[]; } } }); console.log(modelNames.length); if(modelNames.length == 0) { alert(modelNames.length ? aletrMsg : 'No phones selected!'); }else { console.log(jsonArr); } } $scope.phones = [{ id: "986745", brandname: "Nokia", modelname: "Lumia 735 TS" }, { id: "896785", brandname: "Nokia", modelname: "Nokia Asha 230" }, { id: "546785", brandname: "Nokia", modelname: "Lumia 510" }, { id: "144745", brandname: "Samsung", modelname: "Galaxy Trend 840" }, { id: "986980", brandname: "Samsung", modelname: "Galaxy A5" }, { id: "586980", brandname: "Samsung", modelname: "Galaxy Note 4 Duos" }, { id: "986980", brandname: "Samsung", modelname: "Galaxy A5" }, { id: "586980", brandname: "Samsung", modelname: "Galaxy Note Duos" }, { id: "232980", brandname: "Htc", modelname: "Htc One X9" }, { id: "456798", brandname: "Htc", modelname: "Desire 820" }, { id: "656798", brandname: "Htc", modelname: "Desire 810S" }]; }); myApp.filter('unique', function() { return function(collection, keyname) { var output = [], keys = []; angular.forEach(collection, function(item) { var key = item[keyname]; if(keys.indexOf(key) === -1) { keys.push(key); output.push(item); } }); return output; }; }); 

  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular.js"></script> 

 <div ng-controller="MyCtrl"> <button ng-click="checkSelectedphones()"> Check selected phones </button> <div ng-repeat="phone in phones | unique:'brandname'"> <label> <input type="checkbox" ng-true-value="'{{phone.brandname}}'" ng-false-value="''" ng-model="selectedBrands[$index]" ng-change="selectBrand(phone)"> {{phone.brandname}} </label> </div> <br> <div ng-repeat="brand in selectedBrands track by $index" ng-if="brand"> {{brand}} <div ng-repeat="phone in phones" ng-if="phone.brandname === brand"> <label> <input type="checkbox" ng-model="phone.selected" > {{phone.modelname}} </label> </div> </div> </div> 

demo

Answer 1

Since you have the checked state saved in selectedBrands , you can just reset the array in the button click like

$scope.selectedBrands = [];

You will also have to update the phone.selected value in the loop

 var myApp = angular.module('myApp', []); myApp.controller('MyCtrl', function($scope, $http) { $scope.selectedBrands = []; $scope.selectBrand = function(selectedphone) { // If we deselect the brand if ($scope.selectedBrands.indexOf(selectedphone.brandname) === -1) { // Deselect all phones of that brand angular.forEach($scope.phones, function(phone) { if (phone.brandname === selectedphone.brandname) { phone.selected = false; } }); } } $scope.checkSelectedphones = function() { var modelNames = []; var jsonArr = []; var subModelArr = []; var aletrMsg = ''; angular.forEach($scope.phones, function(phone) { if (phone.selected) { modelNames.push(phone); var found = jsonArr.some(function(el) { if (el.model === phone.brandname) { el.subModel.push(phone.modelname); return true; } }); if (!found) { subModelArr.push(phone.modelname); jsonArr.push({ model: phone.brandname, brand: 'Nokia', subModel: subModelArr, city: 'Noida', }); subModelArr = []; } } phone.selected = false; }); console.log(modelNames.length); if (modelNames.length == 0) { alert(modelNames.length ? aletrMsg : 'No phones selected!'); } else { console.log(jsonArr); } $scope.selectedBrands = []; } $scope.phones = [{ id: "986745", brandname: "Nokia", modelname: "Lumia 735 TS" }, { id: "896785", brandname: "Nokia", modelname: "Nokia Asha 230" }, { id: "546785", brandname: "Nokia", modelname: "Lumia 510" }, { id: "144745", brandname: "Samsung", modelname: "Galaxy Trend 840" }, { id: "986980", brandname: "Samsung", modelname: "Galaxy A5" }, { id: "586980", brandname: "Samsung", modelname: "Galaxy Note 4 Duos" }, { id: "986980", brandname: "Samsung", modelname: "Galaxy A5" }, { id: "586980", brandname: "Samsung", modelname: "Galaxy Note Duos" }, { id: "232980", brandname: "Htc", modelname: "Htc One X9" }, { id: "456798", brandname: "Htc", modelname: "Desire 820" }, { id: "656798", brandname: "Htc", modelname: "Desire 810S" }]; }); myApp.filter('unique', function() { return function(collection, keyname) { var output = [], keys = []; angular.forEach(collection, function(item) { var key = item[keyname]; if (keys.indexOf(key) === -1) { keys.push(key); output.push(item); } }); return output; }; }); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular.js"></script> <div ng-app="myApp"> <div ng-controller="MyCtrl"> <button ng-click="checkSelectedphones()"> Check selected phones </button> <pre>{{selectedBrands}}</pre> <div ng-repeat="phone in phones | unique:'brandname'"> <label> <input type="checkbox" ng-true-value="'{{phone.brandname}}'" ng-false-value="''" ng-model="selectedBrands[$index]" ng-change="selectBrand(phone)">{{phone.brandname}} </label> </div> <br> <div ng-repeat="brand in selectedBrands track by $index" ng-if="brand"> {{brand}} <div ng-repeat="phone in phones" ng-if="phone.brandname === brand"> <label> <input type="checkbox" ng-model="phone.selected">{{phone.modelname}} </label> </div> </div> </div> </div> 

Answer 2

Just add phone.selected = false; at the end of your forEach and $scope.selectedBrands = []; afterwards.

https://jsfiddle.net/bbz9pjhc/1/

PS: The way you are solving your problem doesn't seem to be "the angular way" to do it, so you might think of reworking it. Anyway, hopefully my answer will send you on the right track for your case.

Answer 3

Just add this line of Code in your checkselectedPhone() method

   for(var i=0;i<$scope.selectedBrands.length;i++)
   {        
         $scope.selectedBrands[i]=false;
    }