AngularJS学习笔记之基本指令(init、repeat)
AngularJS学习笔记之基本指令(init、repeat)
<h3>ng-init初始化变量</h3>
<divng-init="name='aurora';age='18'">
<png-bind="name+','+age"></p>
<p>{{name+','+age}}</p>
<png-bind="name"></p>
<png-bind="age"></p>
</div>
<h3>ng-init初始化对象</h3>
<divng-init="hero={name:'aurora',role:'sup',line:'不管刮风还是下雨，太阳照常升起'}">
<png-bind="hero.name+','+hero.role+','+hero.line"></p>
<png-bind="hero.name"></p>
<png-bind="hero.role"></p>
<png-bind="hero.line"></p>
</div>
<h3>ng-init初始化数组</h3>
<divng-init="heros=['曙光女神','堕落天使','魂锁典狱长']">
<png-bind="heros[0]+','+heros[1]+','+heros[2]"></p>
<png-bind="heros[0]"></p>
<png-bind="heros[1]"></p>
<png-bind="heros[2]"></p>
</div>
<h3>ng-controller控制器</h3>
<divng-controller="contr-2">
FirstName:<inputtype="text"ng-model="firstName">
LastName:<inputtype="text"ng-model="lastName">
FullName:<span>{{firstName+","+lastName}}</span>
FullName:<spanng-bind="firstName+','+lastName"></span>
</div>
<h3>ng-repeat遍历无重复集合</h3>
<divng-init="names=[1,2,3]">
<ul>
<ling-repeat="xinnames">
{{x}}
</li>
</ul>
</div>
<h3>ng-repeat遍历重复集合</h3>
<divng-init="number=[1,2,2,3]">
<ul>
<ling-repeat="xinnumbertrackby$index">
{{x}}
</li>
</ul>
</div>
<h3>ng-repeat遍历对象</h3>
<divng-controller="contr-3">
<ul>
<ling-repeat="(key,value)inobjecttrackby$index">
{{key+":"+value}}
</li>
</ul>
</div>
<h3>ng-repeat遍历对象(按原有顺序)</h3>
<divng-controller="contr-4">
<ulng-repeat="objinobjs">
<ling-repeat="(key,value)inobj">
{{key+":"+value}}
</li>
</ul>
</div>
<h3>ng-repeat遍历对象(属性详解)</h3>
<tableng-controller="contr-5">
<trng-repeat="(key,value)inobjs">
<td>学号:
<spanng-bind="$index"></span>
</td>
<td>
<spanng-bind="key"></span>:
<spanng-bind="value"></span>
</td>
<td>是否为奇数？
<spanng-bind="$odd"></span>
</td>
<td>是否为偶数？
<spanng-bind="$even"></span>
</td>
<td>排行是老大？
<spanng-bind="$first"></span>
</td>
<td>排行最小？
<spanng-bind="$last"></span>
</td>
<td>排行中间？
<spanng-bind="$middle"></span>
</td>
</tr>
</table>
<h3>ng-repeatstart/end</h3>
<divng-controller="contr-6">
<divng-repeat-start="(key,value)inobjs">
<p>学号:
<spanng-bind="$index"></span>
</p>
<p>
<spanng-bind="key"></span>:
<spanng-bind="value"></span>
</p>
</div>
<divng-repeat-end></div>
</div>
以上所述上就是本文的全部内容了，希望大家能够喜欢。