16

Basically I want this http://plnkr.co/edit/3yfXbo1c0llO40HZ8WNP?p=preview but watch doesn't fire when I change something..

I know that this would have worked

$scope.$watch('stuff', function (newVal, oldVal) {
    console.log(oldVal, newVal);

}, true);

But since I want to do some summing up inside the watches and I don't want to unnecessarily loop thru or re-sum values that did not change..

//edit - note that the plnkr example is just an extraction from the actual app, where you can add and remove rows and much more, like modifying the total number(sum of somethings and somethingelses) from another input outside the ng-repeat..

Improve this question
8
  • There is no $scope.stuff.something variable, so you can't $watch that. Commented Mar 20, 2013 at 11:26
  • @Stewie So I should either watch the whole stuff or rather have my summing functions inside some onchange/onkeyup event, is that right? Commented Mar 20, 2013 at 11:29
  • 1
    I want a sum of something and somethingelse, now when something changes, it would be unnecessarily to sum somethingelse as well Commented Mar 20, 2013 at 11:32
  • 1
    need to loop through whole object to get sum of one property, so what differnce will it make to sum other property at same time? Commented Mar 20, 2013 at 11:53
  • 1
    I'd say just watch the whole stuff and keep away from premature optimization. Commented Mar 20, 2013 at 12:45

4 Answers 4

Reset to default
6

I would not do a watch as depending on how large your array could be, might be very taxing. Instead I would just create a filter:

HTML:

Sum of something is: {{ stuff | sum:'something' }}<br/>
Sum of somethingelse is: {{ stuff | sum:'somethingelse' }}

Javascript:

.filter("sum", function(){
    return function(input, params){
        var totalSum = 0;
        for(var x = 0; x < input.length; x++){
            totalSum += input[x][params];
        }
        return totalSum;
    }
})

plnkr: http://plnkr.co/edit/p6kM3ampSuMXnwqcteYd?p=preview

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

14 Comments

This uses less watches and let's angular do more of the grunt work. Having a loop that sets up a lot of watch's as in the other examples will only slow down your program as your array grows in size.
If you're only showing the sum, not using it internally, then I believe this is the best approach. The only thing I would do different, is that I wouldn't use a filter. You can simply set the binding to {{stuff.something + stuff.somethingelse}}. This way you will grant the value will always change when one or another changes, at the minimum watch cost.
I don't think you can use the binding you suggested, stuff is an array, not an object.
This solution will actually watch the whole object.
@ganaraj do you have a source for that? I'd like to read up more on it.
|
4

I am smiling all over the place after I came up with this solution for your problem. Not only is this solution going to watch individual objects, it also is not going to do a complete loop through the rest of the objects for the summation.

http://plnkr.co/edit/oPWobcLLtJlxs5vjTYyc?p=preview

app.controller('MainCtrl', function($scope) {
  $scope.stuff = STUFF;
  var i;
  $scope.sumOfSomething = 0;
  $scope.sumOfSomethingElse = 0;

  for(i=0;i < $scope.stuff.length;i++ ){
    $scope.$watch('stuff['+i+'].something', function (newVal,oldVal) {
      // happens when the watch is registered.
      if(oldVal === newVal){
        $scope.sumOfSomething += +newVal;
        return;
      }
      if(newVal){
        $scope.sumOfSomething += + (newVal - oldVal);
      }
    });

    $scope.$watch('stuff['+i+'].somethingelse', function (newVal,oldVal) {
      // happens when the watch is registered. 
      if(oldVal === newVal){
        $scope.sumOfSomethingElse += +newVal;
        return;
      }

      if(newVal){
        $scope.sumOfSomethingElse += + (newVal - oldVal);
      }

    });  
  }
});

By the way I dont know how optimal this solution is going to be if you have a large number of objects in STUFF. Also, this wont work as is if the number of objects in STUFF is going to change. What we are basically doing is using the dirty checking loop of angular to do our summation for us.

Also notice the order of newVal and oldVal in the watch listener. Your order is wrong.

Improve this answer

3 Comments

this solution as I see it does not add support for adding elements to 'stuff'
@martinpaulucci I have already mentioned that . SEE : Also, this wont work as is, if the number of objects in STUFF is going to change.
This fixes the original poster's mistake of watching 'stuff.something' instead of 'stuff[i].something' and answers the question in the title of this page: "Angular.js watch only on particular object property". The issues mentioned that relate to watching individual elements of an array are all valid but that's not part of the question that got me to this page. Thanks.
3

Since $watch() takes an angular expression you can use a custom watcher function. In your case the easiest way to watch for changes is simply to add up all the fields you're interested in then return a single number which is nice and efficient for angular and your sum will be ready to render.

var sumThings = function(obj, field) {
  var val = 0;
  obj.forEach(function(o) {
    val += parseInt(o[field]);
  });
  return val;
};

$scope.$watch(function() { return sumThings($scope.stuff, "something")}, function (newVal, oldVal) {    //console.log("watchExpression('something') fired!", oldVal, newVal);
  $scope.somethingSum = newVal;
});

$scope.$watch(function() { return sumThings($scope.stuff, "somethingelse")}, function (newVal, oldVal) {
  $scope.somethingelseSum = newVal;
});

Basically, by doing your summation you're doing your own dirty checking. It'll be more efficient than $watch(STUFF, true) if your objects are more complex than you've shown here.

Your updated plnkr : http://plnkr.co/edit/d7CvERu3XGkub4l6f1yw?p=preview

Improve this answer

Comments

1

Well, if I got it, you just want to sum something with somethingelse of the inner objects when they change. And you don't want to loop through all the other inner objects if the change is in one of them.

Well, your $watch isn't firing for there is no stuff.property, and there is no patterns like stuff.*.something.

If you know the moment the objects gets pushed or pulled from the array, than you can apply a separately $scope.$watch(object, function(){}, true) before/after inserting each one to the array. If you don't know this moment, than you will need to $watch the entire array, and when a change happens, run all deregistration functions and $watch them all again, one by one.

Anyway, a loop in nowadays browsers is pretty fast, and except you're doing heavy calculations and you have millions of objects (what would have been a memory problem already) you'll probably be good with it. So, an effort to $watch them all separately is only necessary if you have really heavy calculations, that could comprise the system performance.

Improve this answer

3 Comments

I'm sure there won't be more than 100 objects inside stuff. So you are saying that I should just stick with watch on the whole stuff instead of doing what @garanaj suggested.
The problem with adding a ,true at the end of a watch is that it checks the entire object/array. This will become very taxing as the array grows in size.
If you know when the array changes, than it would be better the approach of adding a separately $watch to them. Anyway, if your objects are not too dense, I see no performance issue $watching 100 items. But stick with separately watches if you know when it changes.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.