0

我的控制器中有两个数组，第三个数组是通过连接前两个数组形成的。

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 绑定的同时连接两个对象集合，以便宠物更新？

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

};

既然你推了同一个名字，即。;'Rottweiler'。由于重复创建，它不会被 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 回答