You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
<spanclass="hljs-tag"><<spanclass="hljs-title">li</span> <spanclass="hljs-attribute">ng-repeat</span>=<spanclass="hljs-value">"party in parties"</span>></span>
We replaced the hard-coded party list with the [ngRepeat](https://docs.angularjs.org/api/ng/directive/ngRepeat) directive and two Angular expressions:
60
57
61
58
* The ng-repeat="party in parties" attribute in the li tag is an Angular repeater directive. The repeater tells Angular to create a li element for each party in the list using the li tag as the template.
Add another binding to index.ng.html , For example:
136
133
137
-
</btf-markdown>
138
-
139
-
<pre><code>
140
-
<spanclass="xml"><spanclass="hljs-tag"><<spanclass="hljs-title">p</span>></span>Total number of parties: </span><spanclass="hljs-expression">{{<span class="hljs-variable">parties.length</span>}}</span><spanclass="xml"><spanclass="hljs-tag"></<spanclass="hljs-title">p</span>></span></span>
141
-
</code></pre>
142
-
143
-
<btf-markdown>
134
+
<p>Total number of parties: {{dstache}}parties.length}}</p>
144
135
145
136
Create a new model property in the controller (inside app.js) and bind to it in the template. For example:
Now that we have full data binding from server to client, let's interact with the data and see the updates in action.
27
+
28
+
In this chapter you will add the option to add a new party and delete an existing one.
29
+
30
+
First let's add a simple form with a button that will add a new party.
31
+
32
+
Add to following form inside the PartiesListCtrl div:
33
+
34
+
<form>
35
+
<label>Name</label>
36
+
<input>
37
+
<label>Description</label>
38
+
<input>
39
+
<button>Add</button>
40
+
</form>
41
+
42
+
43
+
So that index.ng.html will look like that:
44
+
45
+
__`index.ng.html`:__
46
+
47
+
<divng-controller="PartiesListCtrl">
48
+
49
+
<form>
50
+
<label>Name</label>
51
+
<input>
52
+
<label>Description</label>
53
+
<input>
54
+
<button>Add</button>
55
+
</form>
56
+
57
+
<ul>
58
+
<ling-repeat="party in parties">
59
+
{{dstache}}party.name}}
60
+
<p>{{dstache}}party.description}}</p>
61
+
</li>
62
+
</ul>
63
+
64
+
</div>
65
+
66
+
67
+
Now we need to make this form functional.
68
+
69
+
## ng-model
70
+
71
+
First thing, let's bind the value of the inputs into a new party variable.
72
+
73
+
To do that we will use the simple and powerful [ng-model](https://docs.angularjs.org/api/ng/directive/ngModel) AngularJS directive.
74
+
75
+
Add ng-model to the form like this:
76
+
77
+
<form>
78
+
<label>Name</label>
79
+
<inputng-model="newParty.name">
80
+
<label>Description</label>
81
+
<inputng-model="newParty.description">
82
+
<button>Add</button>
83
+
</form>
84
+
85
+
Now each time the user types inside those inputs, the value of the newParty scope variable will be automatically updated. Conversely, if $scope.newParty is changed outside of the HTML, the input values will be updated accordingly.
86
+
87
+
## ng-click
88
+
89
+
Now let's bind a click event to the add button with Angular's [ng-click](https://docs.angularjs.org/api/ng/directive/ngClick) directive.
ng-click binds the click event into an expression.
95
+
So we take the parties scope array (when accessing scope variables in the HTML, there is no need to add $scope. before) and push the newParty variable into it.
96
+
97
+
Open a different browser, click the button and see how the party is added on both clients. So simple!
98
+
99
+
100
+
Now, let's add the ability to delete parties.
101
+
102
+
Let's add an X button to each party:
103
+
104
+
<ul>
105
+
<ling-repeat="party in parties">
106
+
{{dstache}}party.name}}
107
+
<p>{{dstache}}party.description}}</p>
108
+
<buttonng-click="remove(party)">X</button>
109
+
</li>
110
+
</ul>
111
+
112
+
113
+
So this time we are binding ng-click to a scope function that gets the current party as a parameter.
114
+
115
+
Let's go into the controller and add that function.
116
+
117
+
Add that function inside the PartiesListCtrl in `app.js`:
There isn't a lot of difference here except a little bit of performance, but now let's change our remove function:
153
+
154
+
$scope.remove = function(party){
155
+
$scope.parties.remove(party);
156
+
};
157
+
158
+
Much nicer! and also better performance.
159
+
160
+
Let's also add a button for remove all parties:
161
+
162
+
<buttonng-click="removeAll()">remove all</button>
163
+
164
+
and add it's function in the scope:
165
+
166
+
$scope.removeAll = function(){
167
+
$scope.parties.remove();
168
+
};
169
+
170
+
Very simple syntax.
171
+
172
+
You can read more about AngularMeteorCollection and it's helper functions in the [API reference](http://angularjs.meteor.com/api/AngularMeteorCollection).
173
+
174
+
175
+
# Summary
176
+
177
+
So now you've seen how easy it is to manipulate the data using AngularJS's powerful directives and sync that data with Meteor's powerful Mongo.collection API.
0 commit comments