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

У меня есть код, как этот
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'); 
     } 

    }

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

источник

2016-08-02 codelearner

Я 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 

     }) 
     } 
     } 
    })

источник

2016-08-02 13:20:21

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

Я изменил свой код, чтобы сделать его работу:

$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

источник

2016-08-02 14:06:37

У меня есть ссылка plunker –

его работающий fine.but мне нужно больше оптимизировать использование кода angular.forEach вместо for –

Основная проблема здесь состоит в том, что вы назначаете ng-model к флажку «checkall» и ng-click, который вызывает функцию, в которой h вы снова определяете значение $ 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) { 
 

 
    \t // 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>

источник

2016-08-02 16:41:57

Отлично! Благодарю. он работает в jsfiddle. но когда я копирую один и тот же код для проекта, я получаю '$ scope.checkall' не определено в консоли' console.log ('if', $ scope.checkall); '. внутри функции 'toggleAll', когда я сначала переключаю флажок, но он дает консоль false в jsfiddle. Не могли бы вы рассказать мне, почему я получаю undefined – codelearner

и после того, как я нажал на отдельные элементы, а затем, если я нажму кнопку «проверить все», проверка будет отображаться каждый раз, если условие (false) – codelearner

@codelearner: у меня есть ссылка plunker на мой ответ. Это ваш код с незначительной ошибкой. вы можете просто скопировать его в свой проект. –

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

ответ

Смежные вопросы