alle Kontrollkästchen in einer ng-repeat geprüft wird, wenn ich nur eine

Question

wähle Ich habe Liste der Objekte rolePermissionList wie folgt benannt:

[{"id":1,"name":"createUser","type":"user","marked":1},{"id":2,"name":"deleteUser","type":"user","marked":1},{"id":3,"name":"editRole","type":"role","marked":0}] 

und ich verwende ng-repeat Kontrollkästchen zu wiederholen, um die Werte in dieser Liste mit wie dies

<div class="form-group"> 
    <label>Role Permissions:</label> 
    <div class="checkbox" ng-repeat="permission in rolePermissionList"> 
     <label> 
      <input type="checkbox" ng-model="idsPermission[permission .idPermission ]" 
       ng-checked="permission.checked">{{permission.name}} 
     </label> 
    </div> 
</div> 

die ng-model des Kontrollkästchen ist idsPermission genannt und es ist eine Liste von Zahlen, sind diese Zahlen der IDS der Objekte.

Wenn ich die Seite einchecke, werden die Checkboxen, die überprüft werden sollen, überprüft, aber wenn ich ein anderes checkboxes ankreuze, werden alle checkboxes überprüft, und wenn ich ein checkbox deaktiviere, passiert das Gleiche deaktiviert.

Ich benutze diese Liste von Zahlen idsPermission Namen alle IDS des Kontrollkästchen zu erhalten, die geprüft werden, dies gearbeitet, bevor ich die Richtlinie ng-checked="permission.checked", verwenden aber jetzt brauche ich es zu benutzen, da jetzt muß ich die Kontrollkästchen zeigen, die schon markiert.

das ist mein Controller

angular.module('MyApp') 
    .controller('RolCtrl', ['$scope', 'RolService', 
     function ($scope, RolService) { 
      $scope.idsPermission = {}; 
      $scope.getListCheckBoxesEditRole = function (idRole) { 

       $scope.selectRol.descripcion; 
       RolService.getListCheckBoxesEditRole(idRole) 
         .then(
           function (d) { 
            var userPermissionList = []; 
            for (var permission in d) { 
             if (d[permission ].type === 'user') { 
              if (d[permission ].marked === 1) 
              { 
               d[permission ].checked = true; 
               userPermissionList.push(d[permission ]); 
              } else { 
               userPermissionList.push(d[permission ]); 
              } 
             } 

            } 
            $scope.rolePermissionList = userPermissionList; 
           }, 
           function (errResponse) { 
            console.error('ERROR'); 
           } 
         ); 
      }; 
     } 
     $scope.getListCheckBoxesEditRole(3); 
    ]); 

Die RolService.getListCheckBoxesEditRole (idRole) -Dienst gibt diese JSON [{"id":1,"name":"createUser","type":"user","marked":1},{"id":2,"name":"deleteUser","type":"user","marked":1},{"id":3,"name":"editRole","type":"role","marked":0}]

und was ich in der Steuerung zu tun ist Iterierte über diese Liste und überprüfen, ob das markierte Feld ist 1 Wenn es 1 ist mache ich das d[permission ].checked = true; Ich was ich denke, dass ich in dieser Zeile tun, setzt den Checked-Wert auf True, damit ich diese Anweisung in der HTML-Ansicht ng-checked="permission.checked"

01 verwenden konnte

Ich habe versucht, dies ng-checked="idsPermission[permission.checked]", aber wenn ich dies tun die Werte, die in der JSON sind, die ich oben einfügen nicht überprüft, wenn ich die Seite laden, aber wenn ich es so setzen ng-checked="permission.checked" sie erscheinen markiert, wie sie sollten, Aber wenn ich ein Kontrollkästchen anklicke, werden alle Kontrollkästchen ausgewählt.

Answer 1

Ich habe zu viele Probleme beim Dokumentieren festgestellt, aber das Hauptproblem war, wie Sie das Array durchlaufen, das vom Dienst zurückgegeben wird. Es sollte wie folgt sein:

-Controller

angular.forEach(d.data, function(permission) { 
     if (permission.type === 'user') { 
     if (permission.marked === 1) { 
      permission.checked = true; 
      userPermissionList.push(permission); 
     } else { 
      userPermissionList.push(permission); 
     } 
     } 
    }); 

Dann Sie Ihre HTML wie folgt vereinfachen:

HTML

<input type="checkbox" ng-model="permission.checked" /> 

Sie alle die sehen können Änderungen in dieser Arbeit plunk.

Answer 2

Ich kann nicht in Ihrem Code sehen, dass $scope.idsPermission wird definiert. In ng-repeat setzen Sie nur den Schlüssel für das Objekt, aber der Wert ist undefined. Aus diesem Grund wird das Kontrollkästchen nicht den korrekten Wert anzeigen.

Sie könnten ng-init verwenden, um das Modell zu initialisieren. Bitte werfen Sie einen Blick auf die vereinfachte Demo unten oder auf diese fiddle.

(definieren Sie auch die Modelle in Ihrem Controller möglich wäre.)

Nur ng-model mit genug sein sollte, um das Kontrollkästchen zu arbeiten. Ich denke, ich habe irgendwo gelesen, dass ng-checked und ng-model nicht reibungslos zusammenarbeiten.

angular.module('demoApp', []) 
 
    .controller('mainCtrl', MainCtrl); 
 

 
function MainCtrl() { 
 
    var vm = this; 
 

 
    angular.extend(vm, { 
 
    data: [{ 
 
     id: 0, 
 
     marked: 1 
 
    }, { 
 
     id: 1, 
 
     marked: 0 
 
    }, { 
 
     id: 2, 
 
     marked: 1 
 
    }] 
 
    }) 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<div ng-app="demoApp" ng-controller="mainCtrl as ctrl"> 
 
    <div ng-repeat="item in ctrl.data"> 
 
    <input type="checkbox" ng-init="ctrl.idPermissions[item.id] = !!item.marked" ng-model="ctrl.idPermissions[item.id]"/>{{item.id}} 
 
    </div> 
 

 
    <pre> 
 
permissions: {{ctrl.idPermissions | json: 2}} 
 
data{{ctrl.data | json: 2}}</pre> 
 

 
</div>