Question

我得到了，我相信，在向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;
    };
});

我过去在转发器中做了很多可见性切换（从不使用track by $index），但我似乎无法确定出错的地方。这甚至与跟踪/阵列比较有关吗？

修改

要清楚，我的演示不是我如何使用此代码。我实际上切换了第二行可见性。我知道我的演示是有缺陷的，因为一旦你切换隐藏，你就无法切换回来。

Answer 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

无关

ng-show / hide with'track by $ index'没有隐藏索引

1 个答案: