demos/watch-group-angularjs/index.htm

<!doctype html>
<html ng-app="Demo">
<head>
	<meta charset="utf-8" />

	<title>
		Watching A Collection Of Expressions Using Scope.$watchGroup() In AngularJS
	</title>
</head>
<body ng-controller="AppController">

	<h1>
		Watching A Collection Of Expressions Using Scope.$watchGroup() In AngularJS
	</h1>

	<p>
		<em>All the good stuff is in the console.</em>
	</p>


	<!-- Load scripts. -->
	<script type="text/javascript" src="../../vendor/angularjs/angular-1.3.8.min.js"></script>
	<script type="text/javascript">

		// Create an application module for our demo.
		var app = angular.module( "Demo", [] );


		// -------------------------------------------------- //
		// -------------------------------------------------- //


		// I control the root of the application.
		app.controller(
			"AppController",
			function( $scope, $parse, $interpolate, $timeout ) {

				// Define some scope-based data to work with during the experiment.
				$scope.friend = {
					id: 1,
					name: "Heather",
					isBFF: true,
					secretHandshake: true
				};


				// Define the array of expressions that will be watched in unison. Under 
				// the hood, each one of these gets passed to the Scope.$watch() method. 
				// As such, each item can be anything that Scope.$watch() can accept.
				var watchExpressions = [
					// A vanilla scope reference.
					"friend.id",

					// An accessor generated by the $parse() service.
					$parse( "friend.name" ),

					// An interpolator generated by the $interpolate() service.
					$interpolate( "{{ friend.name }} is awesome!" ),

					// A watch function that returns the value being watched.
					function watchExpression( scope ) {

						return( "isBFF: " + scope.friend.isBFF );

					},

					// A one-time binding.
					":: ( 'Secret handshake: ' + friend.secretHandshake )"
				];


				// When we pass the array of expressions into $watchGroup(), each 
				// expression is individually passed to its own $watch() handler. Then,
				// if any one of the values changes, our callback is invoked with the 
				// collection of evaluated expressions.
				var deregisterWatch = $scope.$watchGroup(
					watchExpressions,
					function handleModelChange( newValues ) {

						console.info( "The group has changed in some way:" );

						for ( var i = 0, length = newValues.length ; i < length ; i++ ) {

							console.log( ">> ", newValues[ i ] );

						}

					}
				);


				// After a brief pause, change the model - just so we can see all the
				// expression evaluations change.
				$timeout(
					function deferModelChange() {

						$scope.friend = {
							id: 2,
							name: "Georgia",
							isBFF: false,
							secretHandshake: false
						};

					},
					100
				);

			}
		);

	</script>

</body>
</html>