0

コントローラーには 2 つの配列があり、最初の 2 つの配列を連結して形成される 3 つ目の配列があります。

var app = angular.module('app', []);

var MainController = app.controller('MainController', function($scope) {
  $scope.dogs = ['Beagle', 'Poodle', 'Boxer'];
  $scope.cats = ['Maine Coon', 'Ragdoll', 'Bengal'];
  $scope.pets = $scope.dogs.concat($scope.cats);

  $scope.createDog = function() {
    $scope.dogs.push('Rottweiler');
  };
});

次に、 を使用してこのすべてのデータを出力しますng-repeat。

<h3>Dogs ({{dogs.length}})</h3>
<ul>
  <li ng-repeat="dog in dogs">{{dog}}</li>
</ul>
<button ng-click="createDog()">Add a dog</button>
<hr>
<h3>Cats ({{cats.length}})</h3>
<ul>
  <li ng-repeat="cat in cats">{{cat}}</li>
</ul>
<hr>
<h3>Pets ({{pets.length}})</h3>
<ul>
  <li ng-repeat="pet in pets">{{pet}}</li>
</ul>

ボタンをクリックして$scope.dogs配列に犬を追加すると、ペットのリストが更新されません。

これがPlunkerのコードです

ペットが更新されるように、Angular のバインディングを保持しながらオブジェクトの 2 つのコレクションを連結するにはどうすればよいですか?

4

2 に答える 2

2

$scope.pets を関数として定義することでこれを解決できます。これは式であり、使用されている $scope 変数が更新されるたびに更新されます: http://plnkr.co/edit/6DyKeN?p=preview

$scope.pets = function() {
    return $scope.dogs.concat($scope.cats);
};
于 2014-06-18T08:34:56.300 に答える
1

これは機能します：

ペットを更新するには、JS 関数を次のように変更します。

$scope.createDog = function() {
   $scope.dogs.push('Rottweiler');
   $scope.pets = $scope.dogs.concat($scope.cats);

};

あなたは同じ名前、つまり「ロットワイラー」をプッシュしているので。複製が作成されるため、画面上で ng-repeat によってレンダリングされないため、使用します

犬の場合、

<li ng-repeat="dog in dogs track by $index">{{dog}}</li>

ペットの場合、

<li ng-repeat="pet in pets track by $index">{{pet}}</li>
于 2014-06-18T10:18:10.540 に答える