1

在将数组添加到ng-repeat.

由于Duplicates in a repeater are not allowed我正在使用的“”错误，track by $index但是当我尝试显示/隐藏一行时，添加的所有内容都会被切换。我尝试将索引传递给一个ng-click，甚至直接在ng-click

这是一些示例代码和一个jsFiddle demonstration

HTML 摘录：

<tbody ng-repeat="person in object track by $index" ng-show="person.visible">
<tr>
    <td>{{ person.name }}</td>
    <td>{{ person.age }}</td>
    <td>
        <a href ng-click="togglePerson($index)">Hide</a>
    </td>
    <!-- <td>
        <a href ng-click="person.visible = !person.visible">Hide</a>
    </td> -->
</tr>
</tbody>

Javascript：

myApp.controller('myController', function ($scope) {
    $scope.init = function () {
        $scope.object = [{
            name: "Billy",
            age: 21,
            visible: true
        }];
        $scope.newEntry = {
            name: 'Ralph',
            age: 16,
            visible: true
        };
    };

    $scope.addPerson = function () {
        $scope.object.push($scope.newEntry);
    };

    $scope.togglePerson = function (index) {
        console.log(index); // Index is being passed properly
        $scope.object[index].visible = !$scope.object[index].visible;
    };
});

过去我在中继器中做了很多可见性切换（从不使用 a track by $index），但我似乎无法确定我哪里出错了。这甚至与跟踪/数组比较有关吗？

编辑

需要明确的是，我的演示不是我如何使用这段代码。我实际上正在切换第二行可见性。我知道我的演示是有缺陷的，因为一旦切换隐藏，就无法切换回来。

4

1 回答 1

1

当您将对象推入数组时，它会通过引用来推入对象。每次你调用这个

$scope.addPerson = function () {
        $scope.object.push($scope.newEntry);
    };

您基本上是在数组的不同索引位置推送相同的对象。现在这个相同的对象在中继器中重复。

当您切换时：

$scope.togglePerson = function (index) {
        console.log(index); // Index is being passed properly
        $scope.object[index].visible = !$scope.object[index].visible;
    };

您基本上是在所有数组索引上设置相同的对象属性，因为数组在所有索引处都具有相同的对象。

您需要在将对象推入数组之前对其进行复制，以便每次都获得一个新对象。

$scope.addPerson = function () {
        $scope.object.push(angular.copy($scope.newEntry));
    };

这是一个演示这一点的小提琴：

jsFiddle demonstration

注意： 这与数组无关track by $index

于 2013-10-29T16:52:42.640 回答