Question

我试图用AngularJS创建一个非常简单的问题示例。我有一个名为testScope的简单范围。我还有另外两个范围（grouped1和grouped2）来自testScope，这些范围已使用UnderscoreJs中的分组功能进行了更改。

的script.js

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

app.controller('mainCtrl', function($scope) {
  $scope.testScope = { 
    test1: {
      data: [
        {
          field1: 'blah',
          field2: 'blah blah'
        },
        {
          field1: 'test',
          field2: 'test test'
        }
     ]
    }
  };

  $scope.createEntry = function(newEntry) {
    $scope.test1.data.push({field1: newEntry.field1, field2: newEntry.field2});
  };

  $scope.test1 = $scope.testScope['test1'];
  $scope.grouped1 = _.groupBy($scope.test1, 'field1');
  $scope.grouped2 = _.groupBy($scope.test1.data, 'field1');
});

的index.html

<body ng-app="testScope" ng-controller="mainCtrl">
  <form ng-submit="createEntry(newEntry)">
    Field1: <input type="text" ng-model="newEntry.field1" />
    Field2: <input type="text" ng-model="newEntry.field2" />
    <input type="submit" />
  </form>

  data
  <div> {{ test1 }} </div><br>

  grouped1
  <div>{{ grouped1 }}</div><br>

  grouped2
  <div>{{ grouped2 }}</div>
</body>

问题在于，当我修改我的范围（使用表单）时，test1和grouped1将更新但分组2不会。为什么没有分组2更新以及如何在范围更改时将groups2更新？

请看我的例子： http://plnkr.co/edit/IN8lADekDBxDp1CNf8VG?p=preview

Answer 1

每次.groupBy($scope.test1.data, 'field1')更改时，$scope.test1.data创建的引用都会更改1。由于$ scope基于引用工作，因此更改允许数据变得陈旧或过时。

要解决此问题，您只需将范围包装在函数中即可。比如这个：

$scope.grouped2 = function() {return _.groupBy($scope.test1.data, 'field1');};

然后只需更改你的html中的引用：

grouped2
<div>{{ grouped2() }}</div>

plunkr：here

Angularjs有两个类似的范围，一个更新，但另一个没有

1 个答案: