Question

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

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数组时，宠物列表永远不会更新。

Here's the code on Plunker

如何在保留角度绑定的同时连接两个对象集合，以便宠物更新？

Answer 1

您可以通过将$ scope.pets定义为函数来解决此问题，因此它是一个表达式，并在更新内部使用的$ scope变量时进行更新：http://plnkr.co/edit/6DyKeN?p=preview

$scope.pets = function() {
    return $scope.dogs.concat($scope.cats);
};

Answer 2

这有效：

对于要更新的宠物，请将您的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>

在保留绑定的同时连接集合

2 个答案: