javascript - 在保留绑定(bind)的同时连接集合

Question

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

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

如何连接两个对象集合，同时保留 Angular 的绑定(bind)以便宠物能够更新？

Answer 1

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

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