Angular Ankreuzfelder „Select All“ -Funktion funktioniert nicht

Ich habe den Code wie dieser
HTMLAngular Ankreuzfelder „Select All“ -Funktion funktioniert nicht

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

Controller

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

    }

Ich habe getrennte Kontrollkästchen mit ng -repeat, und wählen Sie alle checkbox.First wenn ich sel ect alle einzelnen Auswahlfelder, das checkall-Feld wird automatisch überprüft, wie ich erwartet habe und auch alle markieren auch alle einzelnen Kontrollkästchen wie erwartet, aber das Problem ist, wenn ich Check-Checkbox zuerst und alle einzelnen Elemente als nächstes, wird es nicht funktionieren wie ich es erwartet habe (das checkall-Kontrollkästchen wird nicht aktiviert oder deaktiviert, basierend auf der Auswahl).
Ich habe versucht einige Stapelüberlauf Antworten, aber es ist das gleiche. Könnte mir jemand sagen wie. Bitte

Quelle

2016-08-02 codelearner

Ich habe deine Frage nicht gelesen, aber um alle Kontrollkästchen zu aktivieren, wird dieser Code funktionieren. Dies ist ein Beispiel, das Sie manipulieren müssen. Sie können hier nachsehen. 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 

     }) 
     } 
     } 
    })

Quelle

2016-08-02 13:20:21

Danke. Ich habe es schon so versucht, es funktioniert in Plunker. Aber nicht in meinem Code. Können Sie bitte überprüfen, was falsch ist in meiner Frage – codelearner

Ich habe Ihren Code geändert es um die Arbeit:

$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

Quelle

2016-08-02 14:06:37

Ich habe Plunker Link hinzugefügt –

es funktioniert gut.aber ich brauche mehr Optimierung der Code verwenden angular.forEach anstelle von Schleife –

Das Hauptproblem dabei ist, dass Sie die Zuordnung ng-model an das "checkall" -Kontrollkästchen und einen ng-click, der eine Funktion aufruft, in der h Sie definieren den Wert von $ scope.checkall erneut.

Sie müssen das nicht tun, da ng-model den Wert dieser Variablen bereits für Sie festlegt.

prüft diese Geige aus, mit dem gleichen Code, den Sie zur Verfügung gestellt, aber mit der fix: 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>

Quelle

2016-08-02 16:41:57

Großartig !!! Vielen Dank. es funktioniert in jsfiddle. aber wenn ich den gleichen Code in das Projekt kopiere, bekomme ich '$ scope.checkall' in der Konsole' console.log '(' if ', $ scope.checkall) undefiniert; '. innerhalb der Funktion 'toggleAll', wenn ich klicke, schalten Sie zuerst alle Kontrollkästchen ein, aber es gibt Konsole von false in jfiddle. Können Sie mir bitte sagen, warum ich undefiniert – codelearner

bekomme und nachdem ich die einzelnen Elemente angeklickt habe, und wenn ich dann alle ankreuze, wird der Check alle immer angezeigt, wenn Bedingung (false) – codelearner

@codelearner: ich habe meinen Link zu meinem Link hinzugefügt Antworten. Es ist dein Code mit kleineren Fehlerbehebungen. Sie können einfach kopieren Sie es in Ihr Projekt einfügen. –

Angular Ankreuzfelder „Select All“ -Funktion funktioniert nicht

Antwort

Verwandte Themen