1

我刚刚开始使用 Angular 并且可以使用手动重新：绑定到范围。

我正在尝试加载填充属性的数据。然后我想根据这个属性更新其他属性，有什么方法可以轻松触发吗？

目前我只是在做：

  1. 加载 JSON 数据
  2. 放mythings
  3. 触发计算mythings_processed

我觉得我应该能够用(2)触发(3 ) ？

例子

Javascript

app.controller('MyCtrl', function($scope, $http) {

  $scope.loadData = function () {
    $http.get('/api/orgs/gocardless/issues.json').success(function(data) {
      $scope.mythings = data.things;
      $scope.generateCalculatedItems() // Surely this isn't necessary?
    });
  };

  $scope.generateCalculatedItems = function () {
    mythings_processed = {}; // Generated using mythings
    $scope.mythings_processed = mythings_processed;
  };
};

HTML

<div ng-controller="IssuesCtrl" ng-init="loadData()">
    <ul>
      <li ng-repeat="thing in things">{{thing.id}}</li>
    </ul>

    <ul>
      <li ng-repeat="processed_thing in mythings_processed">{{processed_thing.id}}</li>
    </ul>
</div>

我确定我在这里对 Angular 做了一些可怕的事情，所以我道歉！

我确实觉得我应该能够做到：

  $scope.mythingsProcessed = function () {
    mythings_processed = {}; // Generated using mythings
    return mythings_processed;
  };

   <ul>
     <li ng-repeat="processed_thing in mythingsProcessed()">{{processed_thing.id}}</li>
   </ul>

但是当我这样做时，它给了我错误：10 $digest() iterations reached. Aborting!

有任何想法吗？

更新：示例数据/用例

我有一个通过 ajax 获取的项目列表：

{
  items: [
    {name: 'pete', value: 1},
    {name: 'john', value: 2},
    {name: 'pete', value: 3},
    {name: 'steve', value: 2},
    {name: 'john', value: 1}
  ]
}

我想显示所有这些，但我也想将它们处理（总和）为：

{
  processed_items: [
    { name: 'pete', value: 4 }
    { name: 'john', value: 3 }
    { name: 'steve', value: 2 }
}

然后将它们也显示在列表中。

4

2 回答 2

2

我不是 100% 确定您要达到的目标。但是要使用 (2) 触发 (3)，您可以使用 $scope 对象的 watch 函数：

app.controller('MyCtrl', function($scope, $http) {

  $scope.loadData = function () {
    $http.get('/api/orgs/gocardless/issues.json').success(function(data) {
      $scope.mythings = data.things;
    });
  };

  scope.$watch('mythings', function(newValue, oldValue) {
    $scope.generateCalculatedItems();
  }

  $scope.generateCalculatedItems = function () {
    mythings_processed = {}; // Generated using mythings
    $scope.mythings_processed = mythings_processed;
  };
};

要将神话绑定到 mythings_processed，您必须通过 AngularJS 中的 $watch-function 手动进行绑定。

于 2013-06-26T12:03:08.723 回答
1

通过您更新的示例，我认为您问题的重点从绑定问题转移到了如何处理传入数据。那是对的吗？

我做了一个可能的解决方案：http: //plnkr.co/edit/BMNmME5

一旦调用成功方法，我就会处理数据。在这种情况下不要做手表。

$scope.loadData = function() {
    $http.get('data.json').success(function(data) {
        $scope.mythings = data;
        $scope.mythingsProcessed = processThings(data);
    });
};

然后函数 processThings 根据需要计算总和（它使用 underscore.js 库）：

var processThings = function(things) {
    var result = _.reduce(
        things,
        function(result, obj) {
            var storedObject = _.findWhere(result, {'name': obj.name});
            if(storedObject) {
                storedObject.value += obj.value;
                return result;
            }
            else {
                return _.union(result, _.clone(obj));
            }
        },
        []);
    return result;
};
于 2013-06-27T20:41:34.143 回答