New in Angular 1.3 - $scope.$watchGroup
With Angular 1.3 you now have access to $scope.$watchGroup. This allows you to monitor an array of expressions for change. This is useful when you want to perform the some logic when any item in a group changes.
Man 1: [00:00] This is another video about the cool things coming in Angular 1.3. As you can see, I'm using release candidate .3 here. We're going to be talking about scope.watchGroup. WatchGroup is coming in 1.3. It's actually very simple.
[00:14] You just say, "Scope.watchGroup." You hand it an array and a listener. Then that array of things will be watched.
[00:25] We have a very simple demo app here. Labels and inputs bound to the vals, as you can see here.
[00:32] We want to watch the value of all of these and respond in the same way for every one of these. And so, this is a good use case for watchGroup.
[00:40] All that you need to do is give an array of expressions. We can say val 1, val 2, val 3, val 4. This is because all of those are on the scope.
[00:55] If we had something else that we wanted to watch, as well, then we'd say function and return some value. That would also be a legitimate, valid expression.
[01:07] But just for simplicity here, it's basically anything that you would pass in a normal scope.watch. Anything that you'd pass in as the first argument here, right here, would be considered a valid expression that you could put as an item in this array.
[01:26] Let's see what we get as our arguments to our listener function. Let's say newVal, oldVal. We'll assign this to the scope so scope.newVal = newVal. Scope.oldVal = oldVal. Then we'll just add those here.
[01:45] We'll say h3newVal and pre newVal. Pipe that through json. We'll do the same for oldVal.
[01:57] Now, as I change things, watch what happens. NewVal now has val for the first item. OldVal still has val 1. That's expected. You can see, as I change things that's how it's being updated.
[02:13] You see the order of items in this array, in the newVal array, being assigned to this newVal is the same order as this watch group.
[02:23] And so, I could say, "Scope.newVal1 = newVal" and the first item in the array, for example.
[02:36] That's what watchGroup does. It is pretty simple. Hopefully you can find a good use for it.
Member comments are a way for members to communicate, interact, and ask questions about a lesson.
The instructor or someone from the community might respond to your question Here are a few basic guidelines to commenting on egghead.io
Be on-Topic
Comments are for discussing a lesson. If you're having a general issue with the website functionality, please contact us at support@egghead.io.
Avoid meta-discussion
Code Problems?
Should be accompanied by code! Codesandbox or Stackblitz provide a way to share code and discuss it in context
Details and Context
Vague question? Vague answer. Any details and context you can provide will lure more interesting answers!