1+ <!doctype html>
2+ < html ng-app ="Demo ">
3+ < head >
4+ < meta charset ="utf-8 " />
5+
6+ < title >
7+ Sanity Check: $index vs. DOM In AngularJS Directives
8+ </ title >
9+
10+ < style type ="text/css ">
11+
12+ a [ ng-click ] {
13+ cursor : pointer ;
14+ text-decoration : underline ;
15+ }
16+
17+ </ style >
18+ </ head >
19+ < body ng-controller ="AppController ">
20+
21+ < h1 >
22+ Sanity Check: $index vs. DOM In AngularJS Directives
23+ </ h1 >
24+
25+ < form ng-submit ="addFriend() ">
26+
27+ < input type ="text " ng-model ="form.name " />
28+ < input type ="submit " value ="Add Friend " />
29+
30+ </ form >
31+
32+ < ul >
33+ < li
34+ ng-repeat ="friend in friends "
35+ class ="friend ">
36+
37+ <!--
38+ As each ngRepeat item is rendered, we're going to
39+ listen for changes on the auto-generated $index value.
40+ -->
41+ < span bn-index-watch > {{ friend.name }}</ span >
42+
43+ ( < a ng-click ="removeFriend( friend ) "> Remove</ a > )
44+
45+ </ li >
46+ </ ul >
47+
48+
49+ <!-- Load scripts. -->
50+ < script type ="text/javascript " src ="../../vendor/jquery/jquery-2.0.3.min.js "> </ script >
51+ < script type ="text/javascript " src ="../../vendor/angularjs/angular-1.2.min.js "> </ script >
52+ < script type ="text/javascript ">
53+
54+ // Create an application module for our demo.
55+ var app = angular . module ( "Demo" , [ ] ) ;
56+
57+
58+ // -------------------------------------------------- //
59+ // -------------------------------------------------- //
60+
61+
62+ // I control the root of the application.
63+ app . controller (
64+ "AppController" ,
65+ function ( $scope ) {
66+
67+ // I am the collection of friends being rendered.
68+ $scope . friends = [
69+ {
70+ name : "Sarah"
71+ }
72+ ] ;
73+
74+ // I am the form-input collection for ngModel.
75+ $scope . form = {
76+ name : ""
77+ } ;
78+
79+
80+ // ---
81+ // PUBLIC METHODS.
82+ // ---
83+
84+
85+ // I add a new friend, using the form input.
86+ $scope . addFriend = function ( ) {
87+
88+ $scope . friends . push ( {
89+ name : $scope . form . name
90+ } ) ;
91+
92+ $scope . form . name = "" ;
93+
94+ } ;
95+
96+
97+ // I remove the given friend from the collection.
98+ $scope . removeFriend = function ( friend ) {
99+
100+ $scope . friends . splice (
101+ $scope . friends . indexOf ( friend ) ,
102+ 1
103+ ) ;
104+
105+ } ;
106+
107+ }
108+ ) ;
109+
110+
111+ // -------------------------------------------------- //
112+ // -------------------------------------------------- //
113+
114+
115+ // I watch for changes in the $index and compare it to the DOM.
116+ app . directive (
117+ "bnIndexWatch" ,
118+ function ( ) {
119+
120+ // I wire the $scope to the DOM.
121+ function link ( $scope , element , attributes ) {
122+
123+ $scope . $watch (
124+ "$index" ,
125+ function ( newValue , oldValue ) {
126+
127+ // Collection the rendered DOM elments and
128+ // the index in the context of the current
129+ // directive / DOM element.
130+ // --
131+ // NOTE: We are making the index 1-based
132+ // for an easier-to-read comparison.
133+ var friendCount = $ ( "li.friend" ) . length ;
134+ var indexCount = ( newValue + 1 ) ;
135+
136+ console . log ( indexCount , "," , friendCount ) ;
137+
138+ }
139+ ) ;
140+
141+ }
142+
143+ // Return directive configuration.
144+ return ( {
145+ link : link ,
146+ restrict : "A"
147+ } ) ;
148+
149+ }
150+ ) ;
151+
152+ </ script >
153+
154+ </ body >
155+ </ html >
0 commit comments