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>
以上所述上就是本文的全部内容了，希望大家能够喜欢。
热门推荐
10 八一幼儿祝福语大全简短
11 公司乔迁食堂祝福语简短
12 婚礼结束聚餐祝福语简短
13 儿媳买车妈妈祝福语简短
14 毕业送礼老师祝福语简短
15 同事辞职正常祝福语简短
16 恭贺新婚文案祝福语简短
17 金店立秋祝福语简短英文
18 婆婆高寿祝福语大全简短