Question

我将一个用户数组从JSON数据源中提取到我的AngularJS模型中。这个数据是在一个表中呈现的，我想创建一个从现有用户对象的两个值计算的列，而不修改我的底层数据服务。

// My model
function UserListCtrl($scope,$http) {
$http.get('users').success(function(data) {
    $scope.users = data;
});
};

在我的部分模板中，我知道我可以做这样的事情：

 <tr ng-repeat="for user in users">
    <td>{{user.data / user.count | number:2}}</td>
 </td>

但我宁愿将该字段添加到模型中，所以我可以这样使用它：

<td>{{user.amplification}}</td>

如何为模型中的每个用户添加“放大”字段？

顺便说一句，是否可以在{2004}上使用orderBy过滤器：

<td>{{user.data / user.count | number:2}}</td>

Answer 1

你可以：

加载用户后立即执行：

$ http.get（'users'）。success（function（data）{ $ scope.users = data; $ scope.user.amplification（）= function（）{return $ scope.user.data / $ scope.user.count; } }）;

并用作{{user.amplification()}}

控制器的任何地方：

$ scope。$ watch（'user'，function（）{ $ scope.userAmplification = $ scope.user.data / $ scope.user.count; ，真实）; $ http.get
或者，如果user.data/count不更改，请执行1.但静态计算：

$ http.get（'users'）。success（function（data）{ $ scope.users = data; $ scope.user.amplification = $ scope.user.data / $ scope.user.count; }）;

并且OrderBy可用于任何表达式（不包括其他过滤器的结果）

Answer 2

如果您在amplicification()更新data和count属性时不需要user功能更新，则可以在控制器中执行以下操作：

$scope.users.forEach(function(user) {

    user.amplification = function() {

        return user.data / user.count;

    };

});

Answer 3

添加第二个答案，因为我认为它是合适的，因为它与我的第一个答案截然不同。

经过一番调查后，我发现如果您尝试动态添加新行，或者新的元素依赖于计算值，那么我最初发布的方法会失败。这是因为$scope.array.forEach()仅在创建控制器时运行。

解决此问题的最佳方法是创建一个包含所需选项的正确定义的object。 e.g。

function Task(id, name, prop1, prop2) {

    this.id = id;
    this.name = name;
    this.prop1 = prop1;
    this.prop2 = prop2;

    this.computedProperty = function () {

        return this.prop1 + this.prop2;

    };  

}

这更加灵活，因为每个创建的新对象都具有新属性。

唯一的缺点是，在你的ajax成功回调中，你需要将每个用户传递给你的'Users（）'构造函数。

Answer 4

对我来说有用的是添加循环并将属性添加到该循环中的每个项目。我使用了控制器的属性，但我确信你可以按照你在问题中接近它的方式使用范围。

function(result) {
    self.list = result;
    angular.forEach(self.list, function(item) {
        item.hasDate = function() {
            return this.TestDate != null;
        }.bind(item); // set this context 
    });
}

然后在我的标记中，我就像这样使用它。

<div ng-repeat...>
    <div ng-show="item.hasDate()">This item has a date.</div>
</div>

将计算字段添加到AngularJS模型中的数组的每个元素

4 个答案: