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;
    };
});

過去にリピーター内でかなりの数の可視性の切り替えを行いましたが (決して を使用したtrack by $indexことはありません)、どこで間違ったのかを判断できないようです。これは追跡/配列比較にも関連していますか?

編集

明確にするために、私のデモンストレーションは、このコードの使用方法ではありません。私は実際に2行目の可視性を切り替えています。非表示に切り替えると元に戻すことができないため、私のデモには欠陥があることを私は知っています。

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 に答える