Question

我有项目列表，想为所有这些项目分配复选框。我已经尝试了下面的代码，但是没有按预期工作。如果我单击全选；然后仅选中所有要检查的项目，如果我单击其他任何项目，则所有项目都将得到检查。

<div class="select">
   <input type="checkbox" ng-model="selectAll"
      ng-init="selectAll=false;" class="filled-in"
      id="userprofiles"/>
   <label for="userprofiles">Select all</label>
</div>
<ul class="collection">
   <li class="collection-item" ng-repeat="profile in userprofiles">
      <input ng-model="user.profile"
         ng-init="user.profile=false"
         class="filled-in" type="checkbox"
         id="userprofile"
         value="{{profile.profile}}"/>
      <label for="userprofile"> {{profile.profile_name}}</label>
   </li>
</ul>

Controller.js：

  $scope.user.profile = [];
    $scope.$watch('selectAll', function(newValue, oldValue) {
        angular.forEach($scope.userprofiles, function(selected, item) {
            $scope.user.profile[item] = newValue;
        });
    });

Answer 1

尝试一下

angular.module("app", []).controller("profileCtrl", function($scope){
  
  $scope.profiles = [
    {value:'Profile 1', selected:true}, 
    {value:'Profile 2', selected:false},
    {value:'Profile 3', selected:true}, 
    {value:'Profile 4', selected:false}
  ];
  
  $scope.toggleAll = function() {
     var toggleStatus = !$scope.isAllSelected;
     angular.forEach($scope.profiles, function(profileprofile){ profileprofile.selected = toggleStatus; });
   
  }
  
  $scope.profileToggled = function(){
    $scope.isAllSelected = $scope.profiles.every(function(profile){ return profile.selected; })
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js">    </script>
<div ng-app="app" ng-controller="profileCtrl">
<form>
    <input type="checkbox" ng-click="toggleAll()" ng-model="isAllSelected">Select all
    <br>
     <div ng-repeat = "profile in profiles">
        <input type="checkbox" ng-model="profile.selected" ng-change="profileToggled()">{{profile.value}}
     </div>
</form>
  {{profiles}} 
</div>

Answer 2

问题出现在您的ng-repeat中：

ng-model="user.profile"

您已为重复的所有复选框分配了相同的ng-model。所以我任何人被选中/未选中都将反映该值。尝试为$ -index分配ng-model，以便每个复选框都有一个不同的ng-model。

对于全选，您使用的是两个不同的变量：

$ scope.userprofiles
user.profile 尝试提供 JSFIDDLE 。

复选框在Angularjs中无法按预期工作

2 个答案: