Skip to content

Commit ec85600

Browse files
bennadelbennadel
committed
Add watch-group demo.
1 parent c155443 commit ec85600

File tree

2 files changed

+116
-1
lines changed

2 files changed

+116
-1
lines changed

‎README.md

+2-1
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ with.
1010

1111
## My JavaScript Demos - I Love JavaScript!
1212

13+
* [Watching A Collection Of Expressions Using Scope.$watchGroup() In AngularJS](http://bennadel.github.io/JavaScript-Demos/demos/watch-group-angularjs/)
1314
* [Stateless Filters Don't Apply To Objects, Arrays, or ngRepeat In AngularJS 1.3](http://bennadel.github.io/JavaScript-Demos/demos/stateless-filters-angularjs-1.3/)
1415
* [Preventing Animation During The Initial Render Of ngRepeat In AngularJS](http://bennadel.github.io/JavaScript-Demos/demos/initial-ng-repeat-animation-angularjs/)
1516
* [Binding Multiple ngSwitchWhen Cases To The Same Value In AngularJS](http://bennadel.github.io/JavaScript-Demos/demos/multiple-ng-switch-when-cases-angularjs/)
@@ -110,4 +111,4 @@ Want more JavaScript goodness? Check out the [JavaScript blog entries][javascrip
110111

111112
[1]: http://www.bennadel.com
112113
[2]: https://plus.google.com/108976367067760160494?rel=author
113-
[javascript-blog]: http://www.bennadel.com/blog/tags/6-javascript-dhtml-blog-entries.htm
114+
[javascript-blog]: http://www.bennadel.com/blog/tags/6-javascript-dhtml-blog-entries.htm

‎demos/watch-group-angularjs/index.htm

+114
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,114 @@
1+
<!doctype html>
2+
<html ng-app="Demo">
3+
<head>
4+
<meta charset="utf-8" />
5+
6+
<title>
7+
Watching A Collection Of Expressions Using Scope.$watchGroup() In AngularJS
8+
</title>
9+
</head>
10+
<body ng-controller="AppController">
11+
12+
<h1>
13+
Watching A Collection Of Expressions Using Scope.$watchGroup() In AngularJS
14+
</h1>
15+
16+
<p>
17+
<em>All the good stuff is in the console.</em>
18+
</p>
19+
20+
21+
<!-- Load scripts. -->
22+
<script type="text/javascript" src="../../vendor/angularjs/angular-1.3.8.min.js"></script>
23+
<script type="text/javascript">
24+
25+
// Create an application module for our demo.
26+
var app = angular.module( "Demo", [] );
27+
28+
29+
// -------------------------------------------------- //
30+
// -------------------------------------------------- //
31+
32+
33+
// I control the root of the application.
34+
app.controller(
35+
"AppController",
36+
function( $scope, $parse, $interpolate, $timeout ) {
37+
38+
// Define some scope-based data to work with during the experiment.
39+
$scope.friend = {
40+
id: 1,
41+
name: "Heather",
42+
isBFF: true,
43+
secretHandshake: true
44+
};
45+
46+
47+
// Define the array of expressions that will be watched in unison. Under
48+
// the hood, each one of these gets passed to the Scope.$watch() method.
49+
// As such, each item can be anything that Scope.$watch() can accept.
50+
var watchExpressions = [
51+
// A vanilla scope reference.
52+
"friend.id",
53+
54+
// An accessor generated by the $parse() service.
55+
$parse( "friend.name" ),
56+
57+
// An interpolator generated by the $interpolate() service.
58+
$interpolate( "{{ friend.name }} is awesome!" ),
59+
60+
// A watch function that returns the value being watched.
61+
function watchExpression( scope ) {
62+
63+
return( "isBFF: " + scope.friend.isBFF );
64+
65+
},
66+
67+
// A one-time binding.
68+
":: ( 'Secret handshake: ' + friend.secretHandshake )"
69+
];
70+
71+
72+
// When we pass the array of expressions into $watchGroup(), each
73+
// expression is individually passed to its own $watch() handler. Then,
74+
// if any one of the values changes, our callback is invoked with the
75+
// collection of evaluated expressions.
76+
var deregisterWatch = $scope.$watchGroup(
77+
watchExpressions,
78+
function handleModelChange( newValues ) {
79+
80+
console.info( "The group has changed in some way:" );
81+
82+
for ( var i = 0, length = newValues.length ; i < length ; i++ ) {
83+
84+
console.log( ">> ", newValues[ i ] );
85+
86+
}
87+
88+
}
89+
);
90+
91+
92+
// After a brief pause, change the model - just so we can see all the
93+
// expression evaluations change.
94+
$timeout(
95+
function deferModelChange() {
96+
97+
$scope.friend = {
98+
id: 2,
99+
name: "Georgia",
100+
isBFF: false,
101+
secretHandshake: false
102+
};
103+
104+
},
105+
100
106+
);
107+
108+
}
109+
);
110+
111+
</script>
112+
113+
</body>
114+
</html>

0 commit comments

Comments
 (0)