AngularJS - Checkbox checked mit ng-click nachdem ich checked mit alle auswählen check alle aber clearing alle löscht nicht alle

AngularJS - Checkbox checked mit ng-click nachdem ich mit allen markiert habe, check alles, aber Clearing all ist löscht nicht alleAngularJS - Checkbox checked mit ng-click nachdem ich checked mit alle auswählen check alle aber clearing alle löscht nicht alle

Ich habe eine Liste von Objekten in und Json-Array. Ich habe die Kontrollkästchen mit ng-repeat deklariert, aber wenn ich ein oder mehrere Kontrollkästchen ankreuze - eins nach dem anderen wählt es das Kontrollkästchen und danach, wenn ich das Teil für alle auswähle, für alle Häkchen, und alle auswählen, wählt alles aus ebenfalls. Aber nachdem ich alle abwählen möchte, hat das Array keine Objekte wahr. Aber die Visualisierung der Checkbox wird immer noch überprüft warum? Kann mir jemand dabei helfen?

ist hier der Teil meiner Codierung über Kontrollkästchen

 var app = angular.module('myApp', []); 
 
    app.controller('companyCtrl', ['$scope', 
 
     function($scope) { 
 
      $scope.addCompany = function(cmpid) { 
 
      $scope.form.companies.push(cmpid); 
 
      }; 
 
      $scope.Companies = [{ 
 
      "id": "001", 
 
      "name": "Company1", 
 
      "address": "Bla bla street, Somewhere City, Some Country" 
 
      }, { 
 
      "id": "002", 
 
      "name": "Company2", 
 
      "address": "Bla bla street, Somewhere City, Some Country" 
 
      }, { 
 
      "id": "003", 
 
      "name": "Company3", 
 
      "address": "Bla bla street, Somewhere City, Some Country" 
 
      }, { 
 
      "id": "004", 
 
      "name": "Company4", 
 
      "address": "Bla bla street, Somewhere City, Some Country" 
 
      }, { 
 
      "id": "005", 
 
      "name": "Company5", 
 
      "address": "Bla bla street, Somewhere City, Some Country" 
 
      }, { 
 
      "id": "006", 
 
      "name": "Company6", 
 
      "address": "Bla bla street, Somewhere City, Some Country" 
 
      }]; 
 
      $scope.checkAll = function() { 
 

 
      $scope.form.companies.splice(0, $scope.form.companies.length); 
 
      $scope.all = true; 
 
      for (var i in $scope.Companies) { 
 
       $scope.addCompany($scope.Companies[i].id); 
 
      } 
 
      console.log($scope.form.companies); 
 
      }; 
 

 
      $scope.uncheckAll = function() { 
 
      $scope.form.companies.splice(0, $scope.form.companies.length); 
 
      $scope.all = false; 
 
      for (var i in $scope.Companies) { 
 
       $scope.addCompany(''); 
 
      } 
 

 
      console.log($scope.form.companies); 
 

 
      }; 
 
     ) 
 
     ] 
 
    };

<html> 
 

 
<head> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
</head> 
 

 
<body ng-app="myApp"> 
 
    <div> 
 
    <a href="#" ng-click="checkAll()">Select All</a> 
 
    <a href="#" ng-click="uncheckAll()">Clear All</a> 
 
    </div> 
 
    <ul> 
 
    <li ng-repeat="cmp in Companies"> 
 
     <div ng-if="cmp"> 
 
     <input id="{{'company-'+ $index}}" type="checkbox" ng-model="cmp.Selected" ng-click="addCompany(cmp.id)" ng-value="cmp.id" ng-checked="all || cmp.Selected" /> 
 
     <label for="{{'company-'+$index}}"> 
 
      <div class="title">{{cmp.name}}</div> 
 
     </label> 
 
     </div> 
 
    </li> 
 
    </ul> 
 
</body> 
 

 
</html>

Quelle

2016-07-29 Sungur Bilgen

gelöst. Ich habe die Uncheck-All-Funktion für for Schleife in eckige forEach geändert, als das mein Problem mit wenig ändern auf addCompany() -Funktion auch behoben;

$scope.checkAll = function() { 
     $scope.form.companies.splice(0, $scope.form.companies.length); 
     $scope.all = true; 
     angular.forEach($scope.Companies, function (cmp) { 
      cmp.Selected = $scope.all; 
      $scope.addCompany(cmp.id); 
     }); 
}; 

$scope.uncheckAll = function() { 
     $scope.form.companies.splice(0, $scope.form.companies.length); 
     $scope.all = false; 
     angular.forEach($scope.Companies, function (cmp) { 
      cmp.Selected = $scope.all; 
      $scope.addCompany(''); 
     }); 
     console.log($scope.form.companies); 
    };

aktualisiert auch die Funktion addCompany() mit folgenden;

$scope.addCompany = function (cmpid){ 
    $scope.latestCompanies = 
    { 
     "id": cmpid, 
    }; 
    if(cmpid === '' || cmpid === null){ 
     $scope.form.companies= []; 
     console.log(JSON.stringify($scope.form)); 
    }else { 
     $scope.form.companies.push($scope.latestCompanies); 
    } 

    };

Danke auch @keklikhasan mich forEach

Quelle

2016-08-02 11:29:17

var app = angular.module('myApp', []); 
app.controller('companyCtrl', ['$scope', 
    function($scope) { 
     $scope.addCompany = function(cmpid) { 
      $scope.form.companies.push(cmpid); 
     }; 
     $scope.Companies = [ 
      { 
       "id": "001", 
       "name": "Company1", 
       "address": "Bla bla street, Somewhere City, Some Country" 
      }, 
      { 
       "id": "002", 
       "name": "Company2", 
       "address": "Bla bla street, Somewhere City, Some Country" 
      }, 
      { 
       "id": "003", 
       "name": "Company3", 
       "address": "Bla bla street, Somewhere City, Some Country" 
      }, 
      { 
       "id": "004", 
       "name": "Company4", 
       "address": "Bla bla street, Somewhere City, Some Country" 
      }, 
      { 
       "id": "005", 
       "name": "Company5", 
       "address": "Bla bla street, Somewhere City, Some Country" 
      }, 
      { 
       "id": "006", 
       "name": "Company6", 
       "address": "Bla bla street, Somewhere City, Some Country" 
      } 
     ]; 
     $scope.checkAll = function() { 

      $scope.form.companies.splice(0, $scope.form.companies.length); 
      $scope.all = true; 
      for (var i in $scope.Companies) { 
       $scope.addCompany($scope.Companies[i].id); 
      } 
      console.log($scope.form.companies); 
     }; 

     $scope.uncheckAll = function() { 
      $scope.form.companies.splice(0, $scope.form.companies.length); 
      $scope.all = false; 
      for (var i in $scope.Companies) { 
       $scope.addCompany(''); 
      } 

      console.log($scope.form.companies); 

     }; 
    } 
]);

Quelle

2016-07-29 12:04:00 ksav

Sie ng-check all || cmp.Selected nach uncheckAll Sie cmp.Selected zu löschen haben Aufruf so geschrieben. Und in der unCheckAll-Funktion fügen Sie unnötige Elemente zu $ scope.form.companies hinzu, ich denke, $ scope.form.companies muss nach uncheckAll leer sein.

Wenn ich Sie

html

ng-checked="cmp.Selected"

  $scope.checkAll = function() { 
      $scope.form.companies.splice(0, $scope.form.companies.length); 
      _.each($scope.Companies, function(comp){ 
       comp.Selected = true; 
       $scope.addCompany(comp.id); 
      }); 
      console.log($scope.form.companies); 
     }; 

     $scope.uncheckAll = function() { 
      $scope.form.companies.splice(0, $scope.form.companies.length); 
      _.each($scope.Companies, function(comp){ 
       comp.Selected = false; 
      }); 
      console.log($scope.form.companies); 
     };

Quelle

2016-07-29 15:20:22 keklikhasan

i Verwenden Sie [Strich] (http://underscorejs.org/) statt für (var Element in Array) – keklikhasan

vielen Dank für Ihre erinnernden verwenden erinnert Ich für forEach Schleife verwenden. @keklikhasan –

AngularJS - Checkbox checked mit ng-click nachdem ich checked mit alle auswählen check alle aber clearing alle löscht nicht alle

Antwort

Verwandte Themen