AngularJs functions in expressions

Question

Is there any reason you would choose one technique over another?

 var items = [{val:7},{val:3},{val:4},{val:1}];

First: Ctrl and View

 $scope.doSomething = function(val){
     return val + 10;
 };

 <div ng-repeat="item in items">
     {{ doSomething(item.val) }}
 </div>

Second: Ctrl and View

 angular.forEach(items,function(item){
      item.val = item.val + 10;
      //item.valAlso = item.val + 10; Or in case you want to preserve model
 });

 <div ng-repeat="item in items">
     {{ item.val }}
 </div>

I usually prefer the second technique (for instance after an http request), but I am wondering if and why specifically one is superior to the other. I know the first technique could end up calling $scope.doSomething multiple times on each digest cycle (for each item in the repeater), but I have heard the argument this is not all that much different from using a filter. Any ideas?

Edit: I am most specifically wondering about the effects on dirty checking, the digest cycle, scope watches etc. Also is function complexity relevant at all (imagine a much more complex function)?

@Chandermani could you elaborate on your answer?

TheBigC
– TheBigC

2014-02-28 04:09:15 +00:00
Commented Feb 28, 2014 at 4:09 — TheBigC
– TheBigC, Commented Feb 28, 2014 at 4:09
My bad i was thinking something else :( Nevermind

Chandermani
– Chandermani

2014-02-28 05:54:25 +00:00
Commented Feb 28, 2014 at 5:54 — Chandermani
– Chandermani, Commented Feb 28, 2014 at 5:54

Dan Prince · Accepted Answer · 2014-02-28 01:08:18Z

6

There will be no performance difference in either, but in terms of semantics and clean separation, there is no reason ever to use the first method. That's what filters were designed and optimized for.

The complexity of the function won't differ between one method to the other as the dirty checks happen in exactly the same way.

If you are modifying the value of the items, then your logic for that should definitely be kept out of your view, i.e. the second example.

answered Feb 28, 2014 at 1:08

Dan Prince

30.1k15 gold badges93 silver badges124 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

TheBigC Over a year ago

If you place a console.log inside the function doSomething, it can be called multiple times per digest for each list item. However the forEach loop only runs once (on instantiation or a server request). Isn't there something fundamentally different about these techniques?

Nick Over a year ago

Both techniques have their place and what matters is why the value is being changed. If the view is saying "If you had 10 more potatoes you would have...", it would be wrong to adjust the current number of potatoes in the controller or model for display purposes because that would make the value incorrect. Creating a new property called future potatoes would be fine or adjusting the value at the point of display. However, if the value received at the backend needs to be adjusted to correctly reflect its meaning, it should be adjusted there and not in the view.

Collectives™ on Stack Overflow

AngularJs functions in expressions

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related