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

时间:2016-12-17 00:13:01

标签: angularjs angularjs-ng-repeat ng-repeat

当我尝试在我的用户数组上使用Cannot read property 'active' of undefined时,我有两个错误:Cannot read property 'boss' of undefinedng-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>

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

此处还有渲染结果:

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

1 个答案:

答案 0 :(得分:2)

这是因为您的isActiveisBoss函数正在传递user.id。我观察到你的user.id从id 1开始,同时在这些函数中,你尝试使用传入的索引访问$scope.users。例如,{{1}您的user.id函数中的3个将尝试访问isActive。但是,实际上没有索引3(代表$scope.users[3].active数组中的第四项,即$scope.users

将您的undefined更改为..isActive(user.id),将...isActive($index)更改为...isBoss(user.id)