Question

我有一个嵌套的ng-repeat和一个过滤器来分组。

我创造了这个 fiddle

var myApp = angular.module('myApp', []);
myApp.controller('myCtrl',['$scope', function($scope) {
   $scope.data =[
    {subject: 'English',module: 'Literature', score: 95}, 
    {subject: 'Maths',module: 'Calculus', score: 90}
   ];

   $scope.dropScore = function() {
      if ($scope.data[0].score > 0) {
       $scope.data[0].score -= 8;
      }
   }

   $scope.origData = angular.copy($scope.data)

   $scope.reset = function () {
     $scope.data = angular.copy($scope.origData);
   };
}])

.filter('groupBy', function() {
  return _.memoize(function(items, field) {
      return _.groupBy(items, field);
  }
 );
});

当您按下按钮命中分数时，英语分数会下降，但单击重置将重置$ scope.data值，但不会在屏幕上显示更新的数据。

有人可以帮忙解决这个问题吗？

Answer 1

Working Demo

只需使用此reset方法：

$scope.reset = function () {   
      $scope.data[0].score = angular.copy($scope.origData[0].score);      
    };

Answer 2

您需要致电$scope.$apply()来更新范围：

$scope.dropScore = function() {
   if ($scope.data[0].score > 0) {
    $scope.data[0].score -= 8;
    $scope.$apply();
   }
}

http://jsfiddle.net/zewaeqpx/

Answer 3

执行ng-repeat=(subject, value) in data | groupBy: 'subject'时，您正在创建另一个要使用ng-repeat的数组。因此，你需要在ng-repeat中使用过滤器来分配每个参数。

选项1： 如果您想保留使用ng-repeat的方式，可以this：

$scope.reset = function () {
    _.forEach($scope.data, function(subject, idx){
        subject.score = $scope.origData[idx].score;
    });
};

选项2： 或者你可以简化ng-repeat，使其像this那样模板成为：

<li ng-repeat="subject in data">
  <span ng-bind="subject.subject"></span>
  <ul>
    <li ng-bind="subject.module + ' - ' + subject.score">
    </li>
  </ul>
</li>

您应该使用ng-bind，因为在某些浏览器中，当未加载数据属性时，它会在加载之前瞬间闪烁{{}}。

如何重置嵌套的ng-repeat

3 个答案: