Флажок не работает должным образом в Angularjs

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

Проблема здесь с вашим ng-повтором:

ng-model="user.profile"

Вы назначили одну и ту же модель ng всем флажкам в повторении.Так что я ни у кого не отмечен / проверен, все будет отражать значение.Попробуйте назначить ng-модель с $ index, чтобы каждый флажок имел свою ng-модель.

И для Выберите все , вы используете две разные переменные:

• $ scope.userprofiles
• user.profile Попробуйте предоставить JSFIDDLE .

Answer 2

Попробуйте это

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>