Adding a computed field to every element of an array in an AngularJS model

Question

Adding a computed field to every element of an array in an AngularJS model

I'm pulling an array of users into my AngularJS model from a JSON datasource. This data is being rendered in a table, and I'd like to create a column that is computed from two values of the existing user object, without modifying my underlying data service.

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

In my partial template, I know I can do something like this:

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

But I'd rather add that field into the model, so I can use it like so:

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

How do I add the "amplification" field to every user in my model?

As an aside, is it possible to use the orderBy filter on something like this:

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

angularjs

Answer 1

You can eather:

Just after loading user do:

$http.get('users').success(function(data) { $scope.users = data; $scope.user.amplification() = function() { return $scope.user.data / $scope.user.count; } });

And use as {{user.amplification()}}

Anywhere at controller:

$scope.$watch('user', function() { $scope.userAmplification = $scope.user.data / $scope.user.count; }, true); $http.get
Or if user.data/count do not change, do same as 1. but staticly calculate:

$http.get('users').success(function(data) { $scope.users = data; $scope.user.amplification = $scope.user.data / $scope.user.count; });

And OrderBy could be used on any expression (uncluding result of other filter)

Answer 2

If you don't need your amplicification() function to update when the data and count properties on your user update, you can do something like this in your controller:

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

    user.amplification = function() {

        return user.data / user.count;

    };

});

Answer 3

Adding a second answer as I feel it's appropriate as it's distinct from my first one.

After a little looking around, I found the method I originally posted falls over if you try to add new rows dynamically, or new elements to the array which depend on the computed value. This is because the $scope.array.forEach() will only run when the controller is created.

The best way to solve this problem is to create a properly defined object which contains the options you want. 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;

    };  

}

This is far more flexible as each new object created will have the new property.

The only downside is that in your ajax success callback, you'll need to pass each of your users into your 'Users()' constructor.

Answer 4

What worked for me was to add a loop and add the property to each item in that loop. I used a property of the controller but I am sure you can use scope the way you are approaching it in the question.

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

Then in my markup I just used it like this.

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