使用ngRepeat时的错误。设置复选框和单选按钮以错误的方式检查

Question

我有组件的控制器中的用户数组。我试图用ngRepeat指令来打印它。目前正处于最后的结果以下错误：

• 根据用户的阵列应该是唯一一个与检查active（第二）。
• 应该有第二个单选按钮而不是第三个按钮。

我有用户对象名单如下：

$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 
       } 
      ]; 

功能是检查每个用户二者的状态：

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

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

实际的模板（视图）：

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

我d一个测试打印，以确保它正确地读取所需的字段。您可以在屏幕截图和代码中看到的实际结果。提前致谢！

Answer 1

您设置一个名称的单选按钮，使他们的一部分同一组，它不允许同时检查多个单选按钮。

另外，ng-checked应该接收一个表达式，在这个例子中是函数调用。

以下代码适合您的需求。

<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

您可以简单地在复选框中使用ng-model =“user.active”。没有功能需要。

输入收音机也是如此。

希望这会有所帮助。查看输入的角度文档。

Answer 3

您使用

$scope.users[id] 

给定ID访问用户。但是你传递的不是一个id。这是一个索引。这会让你的代码感到困惑。你应该传递用户本身，而不是索引。事实上，你根本不需要这些功能，因为你只需要user.active和user.boss。

你也不需要ng检查。只需使用NG-模型

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

注意，我改变了无线电复选框，因为两者的用户是老板，因此，它没有太大的意义，用一个单选按钮。

如果你想要一个单选按钮，那么应该调整模型;你应该在范围内的属性引用唯一的用户当老板：

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

，并在您的视图：

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