ng-重复错误。无法读取未定义的 属性

Question

我有两个错误说：Cannot read property 'active' of undefined 和 Cannot read property 'boss' of undefined 当我尝试对我的用户数组使用 ng-repeat 时。

我在控制器中使用了以下代码：

            $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: false,
                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($scope.users[id]);
            return $scope.users[id].boss;
        }

在视图中我有以下代码：

<thead>
        <tr>
            <th>#</th>
            <th>Username</th>
            <th>Birthday</th>
            <th>City</th>
            <th>Active</th>
            <th>Boss</th>
        </tr>
    </thead>
    <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(user.id) }">
                </td>
                <td>
                    <input type="radio" name="boss" ng-checked="{ checked: isBoss(user.id) }">
                </td>
            </tr>
        </div>
    </tbody>

最后它以正确的方式打印 table 但也会抛出这些错误。我错过了什么吗？

这里还有渲染结果：

<tbody>
    <!-- ngRepeat: user in users -->
    <tr ng-click="goToProfile(user.id)" ng-repeat="user in users" class="ng-scope">
        <td class="ng-binding">1</td>
        <td class="ng-binding">John</td>
        <td class="ng-binding">06.07.2008</td>
        <td class="ng-binding">Budapest</td>
        <td>
            <input type="checkbox" name="active" ng-checked="{ checked: isActive(user.id) }" checked="checked">
        </td>
        <td>
            <input type="radio" name="boss" ng-checked="{ checked: isBoss(user.id) }" checked="checked">
        </td>
    </tr>
    <!-- end ngRepeat: user in users -->
    <tr ng-click="goToProfile(user.id)" ng-repeat="user in users" class="ng-scope">
        <td class="ng-binding">2</td>
        <td class="ng-binding">Mary</td>
        <td class="ng-binding">01.02.2003</td>
        <td class="ng-binding">Berlin</td>
        <td>
            <input type="checkbox" name="active" ng-checked="{ checked: isActive(user.id) }" checked="checked">
        </td>
        <td>
            <input type="radio" name="boss" ng-checked="{ checked: isBoss(user.id) }" checked="checked">
        </td>
    </tr>
    <!-- end ngRepeat: user in users -->
    <tr ng-click="goToProfile(user.id)" ng-repeat="user in users" class="ng-scope">
        <td class="ng-binding">3</td>
        <td class="ng-binding">James</td>
        <td class="ng-binding">04.05.2006</td>
        <td class="ng-binding">Vienna</td>
        <td>
            <input type="checkbox" name="active" ng-checked="{ checked: isActive(user.id) }">
        </td>
        <td>
            <input type="radio" name="boss" ng-checked="{ checked: isBoss(user.id) }">
        </td>
    </tr>
    <!-- end ngRepeat: user in users -->

</tbody>

Answer 1

那是因为你的 isActive 和 isBoss 函数正在被传递 user.id。我观察到您的 user.id 从 id 1 开始，同时在这些函数中，您试图使用传入的索引访问 $scope.users。发生的情况是，例如，user.id isActive 函数中的 3 个将尝试访问 $scope.users[3].active。但是，实际上没有索引 3（代表 $scope.users 数组中的第四项，即 undefined）

将 ..isActive(user.id) 更改为 ...isActive($index)，将 ...isBoss(user.id) 更改为 ...isBoss($index)