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

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

Answer 1

您可以简单地在复选框中使用 ng-model="user.active"。不需要任何功能。

输入收音机也是如此。

希望这对您有所帮助。查看 angular 输入文档。

Answer 2

您正在使用

$scope.users[id]

访问具有给定 ID 的用户。但是你传递的不是一个 id。它是一个索引。这会使您的代码混乱。您应该传递用户本身，而不是其索引。事实上，您甚至根本不需要这些功能，因为您只需 user.active 和 user.boss.

您也不需要 ng-checked。只需使用 ng-model

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

Answer 3

您为单选按钮设置了一个名称，使它们属于同一组，不允许同时选中多个单选按钮。

此外，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>

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

Bug while using ngRepeat. Set checkboxes and radio buttons checked in a wrong way

angularjs

ng-repeat