Question

这里我在下面添加了我的代码。检查选中的手机按钮后点击了如何取消选中所有选中的复选框，请帮我解决这个问题。期望：按下按钮后，所有复选框都应该取消选中我添加了小提琴也帮助我

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

由于您已将检查状态保存在selectedBrands中，因此您只需按下按钮即可重置数组

$scope.selectedBrands = [];

您还必须更新循环中的phone.selected值

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

只需在forEach的末尾添加phone.selected = false;，然后再添加$scope.selectedBrands = [];。

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

PS：你解决问题的方式似乎并不是“有角度的方式”，所以你可能会想到重做它。无论如何，希望我的答案会让你找到适合你案件的正确方法。

Answer 3

只需在checkselectedPhone（）方法

中添加此行代码即可

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

如何在angularjs中单击按钮（选中所选手机）后取消选中所有复选框？

3 个答案: