Угловые флажки «Выбрать все» не работают

Question

Угловые флажки «Выбрать все» не работают

0

У меня такой код, как этот
HTML

 <div class="check_toggle" ng-click="toggleAll(payout)">                               
         select all
   <input type="checkbox" aria-label="Art"  ng-model="checkall"/>
 </div>

<table>
<thead>
  <tr>
    <th>Week</th>
    <th>Release Payment</th>
  </tr>
</thead>
<tbody>

  <tr ng-repeat="item in payout">
    <td>{{item.value}}</td>

    <td>
      <div class="checkbox pay_check">

        <input aria-label="Art" type="checkbox" ng-model="allCheckBox[$index]" ng-click="selectItem(item._id,selected,payout)">

      </div>
    </td>
  </tr>
</tbody>

контроллер

 $scope.payout= [
{'_id':1, value:'Option1'},  
{'_id':2, value:'Option2'}
];

 $scope.toggleAll = function(payout) {

        $scope.checkall = !$scope.checkall;
        for(var i=0;i<payout.length;i++){
             if($scope.checkall===false){
                   $rootScope.selected=[];
                   $scope.allCheckBox[i] = $scope.checkall ;
             }else{
                 $rootScope.selected[i]=payout[i]._id;
                 $scope.allCheckBox[i] =$scope.checkall ;
             }

        }
 }


    $scope.selectItem = function(id, list,payout) {

        console.log('id',id);
        var idx = list.indexOf(id);
        if (idx > -1) {
            list.splice(idx, 1);
        } else {
            list.push(id);
        }
         if(payout.length==$rootScope.selected.length){
            $scope.checkall=true;
            console.log($scope.checkall);
            // $scope.checkall=  $scope.checkall;
            console.log('All checkboxes selected');
        }
        else{
            $scope.checkall=false;
             console.log('Not All checkboxes selected');
        }

    }

У меня есть отдельные флажки с помощью ng-repeat и выберите все флажки. Сначала, когда я выбираю все отдельные флажки, флажок checkall будет автоматически проверяться, как я ожидал, а также проверить все также, чтобы выбрать все отдельные флажки, как я ожидал, но проблема если я сначала нажму check checkall и все отдельные элементы, это не сработает, как я ожидал (флажок checkall не будет проверен или не проверен на основе выбора).
Я попробовал несколько ответов, но это то же самое. Может ли кто-нибудь сказать мне, как это сделать. пожалуйста

codelearner 02 авг. 2016, в 15:29

Источник

Теги:

javascript

html

angularjs

angular-material

checkbox

3 ответа

Ещё вопросы

R. Santos · Answer 1 · 2016-08-02T14-47-00.000Z

Основная проблема здесь в том, что вы назначаете ng-model флажку "checkall" и ng-click, который вызывает функцию, в которой вы снова определяете значение $ scope.checkall.

Вам не нужно это делать, поскольку ng-model уже устанавливает для вас значение этой переменной.

Посмотрите эту скрипку с тем же кодом, который вы указали, но с исправлением: https://jsfiddle.net/h46rLzhs/5/

 angular.module('MyApp',[])
    .controller('MyController', function($rootScope, $scope){
     $rootScope.selected=[];
     $scope.allCheckBox=[];
     $scope.payout= [
         {'_id':1, value:'Option1'},  
         {'_id':2, value:'Option2'}
     ];

     $scope.toggleAll = function(payout) {

    	// Line below is not needed
        //$scope.checkall = !$scope.checkall;
        for(var i in payout){
           if($scope.checkall===false){
                $rootScope.selected=[];
                $scope.allCheckBox[i] = $scope.checkall ;
           }else{
                $rootScope.selected[i]=payout[i]._id;
                $scope.allCheckBox[i] =$scope.checkall ;
           }
        }
     }

     $scope.selectItem = function(id, list,payout) {

         console.log('id',id);
         var idx = list.indexOf(id);
         if (idx > -1) {
             list.splice(idx, 1);
         } else {
             list.push(id);
         }
         if(payout.length==$rootScope.selected.length){
             $scope.checkall=true;
             console.log($scope.checkall);
             // $scope.checkall=  $scope.checkall;
             console.log('All checkboxes selected');
         }
         else{
             $scope.checkall=false;
             console.log('Not All checkboxes selected');
         }
     }
 })

<div ng-app="MyApp">
  <div ng-controller="MyController">
    
   <div ng-click="toggleAll(payout)">
         select all
     <input type="checkbox" ng-model="checkall"/>
   </div>

   <table>
   <thead>
    <tr>
       <th>Week</th>
       <th>Release Payment</th>
    </tr>
  </thead>
  <tbody>

    <tr ng-repeat="item in payout">
      <td>{{item.value}}</td>

      <td>
        <input type="checkbox" ng-model="allCheckBox[$index]" ng-click="selectItem(item._id,selected,payout)">
      </td>
    </tr>
    </tbody>
   </table>
  </div>
</div>

Большой!!! Благодарю. это работает в jsfiddle. но когда я $scope.checkall тот же код в проект, я получаю, что $scope.checkall не определен в console console.log('if',$scope.checkall); , внутри функции toggleAll когда я toggleAll переключаю флажок all, но он дает консоль false в jsfiddle. Можете ли вы сказать мне, почему я получаю неопределенный
и после того, как я щелкнул по отдельным элементам, а затем, если я нажму «проверить все», флажок «все» будет отображаться каждый раз, если условие (false)
@codelearner: я добавил плункерную ссылку в свой ответ. Это ваш код с небольшими ошибками. Вы можете просто скопировать вставить его в свой проект.

Dev Shah · Answer 2 · 2016-08-02T12-46-00.000Z

Я изменил ваш код, чтобы он работал:

  $scope.checkall=false;
  $scope.allCheckBox=[];
  $rootScope.selected = [];
  $scope.payout = [{
    '_id': 1,
    value: 'Option1'
  }, {
    '_id': 2,
    value: 'Option2'
  }];

  $scope.toggleAll = function() {
    $scope.checkall = !$scope.checkall;
    $rootScope.selected = [];
    $scope.allCheckBox=[];

    for (var i = 0; i < $scope.payout.length; i++) {
      $scope.allCheckBox.push($scope.checkall);
      if ($scope.checkall)
        $rootScope.selected.push($scope.payout[i]);
    }
  }


  $scope.selectItem = function(id) {

    console.log('id', id);
    var idx = $rootScope.selected.indexOf(id);
    if (idx > -1) {
      $rootScope.selected.splice(idx, 1);
    } else {
      $rootScope.selected.push(id);
    }
    if ($scope.payout.length == $rootScope.selected.length) {
      $scope.checkall = true;
      console.log($scope.checkall);
      // $scope.checkall=  $scope.checkall;
      console.log('All checkboxes selected');
    } else {
      $scope.checkall = false;
      console.log('Not All checkboxes selected');
    }

  }

HTML:

<div class="check_toggle" ng-click="toggleAll()">                               
     select all
   <input type="checkbox" aria-label="Art"  ng-model="checkall"  ng-click="toggleAll()"/>
 </div>

<table>
<thead>
  <tr>
    <th>Week</th>
    <th>Release Payment</th>
  </tr>
</thead>
<tbody>

  <tr ng-repeat="item in payout">
    <td>{{item.value}}</td>

    <td>
      <div class="checkbox pay_check">

        <input aria-label="Art" type="checkbox" ng-model="allCheckBox[$index]" ng-click="selectItem(item._id)">

      </div>
    </td>
  </tr>
</tbody>
</table>

Plunk: https://plnkr.co/edit/SmabE9?p=preview

он работает нормально. но мне нужно больше оптимизации кода использовать angular.forEach вместо цикла for

naresh vadlakonda · Answer 3 · 2016-08-02T10-40-00.000Z

я did'nt прочитал ваш вопрос, но для переключения всех флажков этот код будет работать. Это пример, который вам нужно манипулировать им. Вы можете посмотреть здесь. https://plnkr.co/edit/qD7CABUF9GLoFCb8vDuO?p=preview

var app = angular.module("test", []);
     app.controller('testctrl',function($scope){

       $scope.options=[

         {option:"option1",
          selected:false ,

         },
         {option:"option1",
          selected:false ,

         },
         {option:"option1",
          selected:false ,

         },
         {option:"option1", 
          selected:false ,

         },
         {option:"option1",
          selected:false ,

         },


         ]

       $scope.test=function(event){

         if(event.currentTarget.checked==true)
       { 
         var togglestatus=$scope.isAllSelected;
         angular.forEach($scope.options,function(object){

           object.selected=togglestatus

         })



<body ng-app="test" ng-controller="testctrl">
   <label>
   <input type="checkbox" ng-model="isAllSelected" ng-click="test($event)">SelectAll</label>

   <div ng-repeat="option in options">
     <input type="checkbox" ng-model="option.selected">checkbox</div>

  </body>      


       }else{
          angular.forEach($scope.options,function(object){

           object.selected=false

         })
       }
       }
     })

Спасибо. Я уже так пробовал, в плункере работает. Но не в моем коде. Можете ли вы проверить, что не так в моем вопросе