$scope.$watch a particular object inside an array - Angular JS controller

Question

My schema is as below.

Orders {
    customers[{
        customerId: String,
        address: String,
        onlineOrder [{
            items...
        }],
        directOrder [{
            items...
        }]
    }]
}

Now, for some reason(too big to explain) I want a watch function, for any items added to onlineOrder[items] array.

For that, I couldnot write the function like,

$scope.$watch('order.customer[i].onlineOrder[j]')

where i and j are array indices.

Because I want the watch function to be triggered for the current 'i'th customer, for every add/delete/modify of 'j'th online order item

I need help in this.

why not control the access to the arrays with methods? then you will know exactly what is changing, and it's way more efficient than a $watch in that case. - But I'd say take a look at $watchCollection possibly, not sure if it would work for you though in this case. — tophallen
– tophallen, Commented Mar 24, 2015 at 7:02
can you please explain a bit in detail. I couldnt get fully. — sabari
– sabari, Commented Mar 24, 2015 at 7:04
Why doesn't $scope.$watch('order.customer[i].onlineOrder[j]', callback, true) work? Whenever you add (undefined->something), delete (something->undefined), modify (something->something else) there is a change and watch will notice... you have to include the true at the end though otherwise the watch function may not notice the latter case unless the object is completely exchanged. — swenzel
– swenzel, Commented Mar 24, 2015 at 7:14

tophallen · Accepted Answer · 2015-03-24 07:15:37Z

I would suggest controlling the access to the array you need to watch, so you can be aware of the changes yourself, without the inefficiencies of a $watch. I'm not sure what all you are trying to do with that object, and it what ways it could be manipulated, but lets say it has items added by a user clicking a button(ng-click).

To control access you could then have the button call a function like so:

<button ng-click="doWork(orderId, customerId, newOnlineOrder)">Add Order</button>

//in your controller
$scope.doWork = function (orderId, customerId, onlineOrder) {
  //do some work to ensure the order is good, then add it to the collection:
  orders[orderId].customers[customerId].push(onlineOrder);
  //notify anything that needs to know it changed
  notifyMyCode(onlineOrder);
};

In this way, you easily know what changed, and you control it being changed maliciously, or by accident, you can validate data before updating your model, and you will know faster and with more certainty that a $watch expression because you control the only way to change the object.

Collectives™ on Stack Overflow

$scope.$watch a particular object inside an array - Angular JS controller

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related