Fehler bei der Verwendung von ngRepeat. Kontrollkästchen und Optionsfelder falsch markieren

Question

Ich habe ein Array von Benutzern in der Steuerung der Komponente. Ich habe versucht, es mit der ngRepeat-Direktive zu drucken. Es ist folgende Fehler im Endergebnis:

• Nach Array von Benutzern sollte es mit karierten active (zweiten) der einzige sein.
• Es sollte das zweite Optionsfeld anstelle des dritten aktiviert sein.

Ich habe die folgende Liste der Benutzer Objekte:

$scope.users = [ 
       { 
        id: 1, 
        name: 'John', 
        birthday: '06.07.2008', 
        city: 'Budapest', 
        active: false, 
        boss: false 
       }, 
       { 
        id: 2, 
        name: 'Mary', 
        birthday: '01.02.2003', 
        city: 'Berlin', 
        active: true, 
        boss: true 
       }, 
       { 
        id: 3, 
        name: 'James', 
        birthday: '04.05.2006', 
        city: 'Vienna', 
        active: false, 
        boss: false 
       } 
      ]; 

Funktionen, die beide Zustände der einzelnen Benutzer überprüfen:

  $scope.isActive = function (id) { 
       return $scope.users[id].active; 
      } 

      $scope.isBoss = function (id) { 
       console.log(id); 
       return $scope.users[id].boss; 
      } 

Die eigentliche Vorlage (Ansicht):

<tbody> 
     <div> 
      <tr ng-click="goToProfile(user.id)" ng-repeat="user in users"> 
       <td>{{user.id}}</td> 
       <td>{{user.name}}</td> 
       <td>{{user.birthday}}</td> 
       <td>{{user.city}}</td> 
       <td> 
        <input type="checkbox" name="active" ng-checked="{ checked: isActive($index) }"> 
        <h1>{{isActive($index)}}</h1> 
       </td> 
       <td> 
        <input type="radio" name="boss" ng-checked="{ checked: isBoss($index) }"> 
        <h1>{{isBoss($index)}}</h1> 
       </td> 
      </tr> 
     </div> 
    </tbody> 

Ich habe d ein paar Testdrucke, um sicherzustellen, dass die benötigten Felder korrekt gelesen werden. Das tatsächliche Ergebnis können Sie auf dem Screenshot und im Code sehen. Danke im Voraus!

Answer 1

Sie legen einen Namen für das Optionsfeld, das sie zu einem Teil der aus gleiche Gruppe, bei der mehrere Optionsfelder nicht gleichzeitig überprüft werden konnten.

Darüber hinaus sollte ng-checked einen Ausdruck, in diesem Fall den Funktionsaufruf erhalten.

Der folgende Code entspricht Ihren Anforderungen.

<tr ng-click="goToProfile(user.id)" ng-repeat="user in users"> 
    <td>{{user.id}}</td> 
    <td>{{user.name}}</td> 
    <td>{{user.birthday}}</td> 
    <td>{{user.city}}</td> 
    <td> 
     <input type="checkbox" name="active" ng-checked="isActive($index)"> 
     <h1>{{isActive($index)}}</h1> 
    </td> 
    <td> 
     <input type="radio" ng-checked="isBoss($index)"> 
     <h1>{{isBoss($index)}}</h1> 
    </td> 
    </tr> 

Answer 2

Sie könnten einfach ng-model = "user.active" in das Kontrollkästchen verwenden. Keine Funktionen benötigt.

Das gleiche gilt für den Eingang Radio.

Hoffe, das hilft. Überprüfen Sie die Winkeldokumentation für Eingaben.

Answer 3

Sie

$scope.users[id] 

mit dem Benutzer mit einer bestimmten ID zuzugreifen. Aber was du passierst, ist keine ID. Es ist ein Index. Das macht deinen Code verwirrend. Sie sollten den Benutzer selbst anstelle seines Index übergeben. Und tatsächlich brauchen Sie diese Funktionen überhaupt nicht, da Sie einfach nur user.active und user.boss können.

Sie brauchen auch nicht ng-checked. Verwenden Sie einfach ng-Modell

<tr ng-click="goToProfile(user)" ng-repeat="user in users"> 
    <td>{{ user.id }}</td> 
    <td>{{ user.name }}</td> 
    <td>{{ user.birthday }}</td> 
    <td>{{ user.city }}</td> 
    <td> 
     <input type="checkbox" name="active" ng-model="user.active"> 
     <h1>{{ user.active }}</h1> 
    </td> 
    <td> 
     <input type="checkbox" name="boss" ng-model="user.boss"> 
     <h1>{{ user.boss }}</h1> 
    </td> 

Bitte beachte, dass ich das Radio auf eine Checkbox geändert, da zwei Ihrer Nutzer sind Chefs, und es somit nicht viel Sinn machen, einen Radio-Button zu verwenden.

Wenn Sie eine Optionsschaltfläche möchten, sollte das Modell angepasst werden; Sie sollten ein Attribut in dem Anwendungsbereich haben die einzigartigen Benutzer seinen Chef Referenzierung:

$scope.model = { 
    boss: $scope.users.filter(function(user) { 
     return user.boss; 
    })[0] 
}; 

und in der Ansicht:

<input type="radio" name="boss" ng-model="model.boss" ng-value="user"/>