angularjs - Checkbox Status von Remote-Daten steuern

Question

Ich versuche, eine Benachrichtigungskonfigurationsseite zu machen. Grundsätzlich sollte der Benutzer wählen können, welche Art von Benachrichtigungen er für ein bestimmtes Modul erhalten möchte. Es gibt 3 Arten von Benachrichtigungen (E-Mail, SMS und UI). Derzeit ist mein Array

$scope.modules= [ 
     { 
      "id": 1, 
      "name": "Module1", 
      "notifications": [ 
       { 
        "notification": "email" 
       } 
      ] 
     }, 
     { 
      "id": 2, 
      "name": "Module2", 
      "notifications": [ 
       { 
        "notification": "sms" 
       }, 
       { 
        "notification": "ui" 
       } 
      ] 
     } 
    ]; 

wie dieses bauen Ich versuche, diese Ansicht

Das Problem zu erreichen: Wenn ich Mitteilungen von einem bestimmten Modul zu wiederholen, ich versuche, wenn zum Beispiel {"notification": "email"} doest nicht vorhanden, das Kontrollkästchen bleibt nicht deaktiviert, sondern wird stattdessen aus der Ansicht entfernt.

Irgendwelche Ideen, wie man die ng-Wiederholung durchführt? Dank

JSFiddle

Answer 1

Die Struktur ist etwas falsch. Warum nicht ein Array von Objekten für Benachrichtigungen wie unten haben:

"notifications": [ {"sms": true}, {"email": false}, {"ui": true} ]; 

Es wäre leicht genug, um zu durchlaufen und stellen Sie dann.

Iterate über $scope.modules und für jedes solche Modul, haben drei Kontrollkästchen in der Verpackung ng-repeat div. Aktivieren Sie dann das Kontrollkästchen je nach Benachrichtigung in notifications.

<span>Email</span> <span>Ui</span> <span>Sms</span> 
<div ng-repeat="module in modules"> 
    {{ module.name }} 
    <div ng-repeat="notification in module.notifications"> 
     <!-- Email --> 
     <input type="checkbox" ng-model="notification.email" /> 
     <!-- Ui --> 
     <input type="checkbox" ng-model="notification.ui" /> 
     <!-- Sms --> 
     <input type="checkbox" ng-model="notification.sms" /> 
    </div> 
</div>