时间:2021-05-28
AngularJS学习笔记之基本指令(init、repeat)
<h3>ng-init初始化变量</h3><div ng-init="name='aurora';age='18'"> <p ng-bind="name+','+age"></p> <p>{{name+','+age}}</p> <p ng-bind="name"></p> <p ng-bind="age"></p></div><h3>ng-init初始化对象</h3><div ng-init="hero={name:'aurora',role:'sup',line:'不管刮风还是下雨,太阳照常升起'}"> <p ng-bind="hero.name+','+hero.role+','+hero.line"></p> <p ng-bind="hero.name"></p> <p ng-bind="hero.role"></p> <p ng-bind="hero.line"></p></div><h3>ng-init初始化数组</h3><div ng-init="heros=['曙光女神','堕落天使','魂锁典狱长']"> <p ng-bind="heros[0]+','+heros[1]+','+heros[2]"></p> <p ng-bind="heros[0]"></p> <p ng-bind="heros[1]"></p> <p ng-bind="heros[2]"></p></div> <h3>ng-controller控制器</h3><div ng-controller="contr-2"> First Name: <input type="text" ng-model="firstName"> Last Name: <input type="text" ng-model="lastName"> Full Name : <span>{{firstName + "," + lastName}}</span> Full Name : <span ng-bind="firstName + ',' + lastName"></span> </div> <h3>ng-repeat遍历无重复集合</h3><div ng-init="names=[1,2,3]"> <ul> <li ng-repeat="x in names"> {{x}} </li> </ul></div><h3>ng-repeat遍历重复集合</h3><div ng-init="number=[1,2,2,3]"> <ul> <li ng-repeat="x in number track by $index"> {{x}} </li> </ul></div><h3>ng-repeat遍历对象</h3><div ng-controller="contr-3"> <ul> <li ng-repeat="(key,value) in object track by $index"> {{key+":"+value}} </li> </ul></div><h3>ng-repeat遍历对象(按原有顺序)</h3><div ng-controller="contr-4"> <ul ng-repeat="obj in objs "> <li ng-repeat="(key,value) in obj "> {{key+":"+value}} </li> </ul></div><h3>ng-repeat遍历对象(属性详解)</h3><table ng-controller="contr-5"> <tr ng-repeat="(key, value) in objs "> <td>学号: <span ng-bind="$index"></span> </td> <td> <span ng-bind="key"></span>: <span ng-bind="value"></span> </td> <td>是否为奇数? <span ng-bind="$odd"></span> </td> <td>是否为偶数? <span ng-bind="$even"></span> </td> <td>排行是老大? <span ng-bind="$first"></span> </td> <td>排行最小? <span ng-bind="$last"></span> </td> <td>排行中间? <span ng-bind="$middle"></span> </td> </tr></table><h3>ng-repeat start/end</h3><div ng-controller="contr-6"> <div ng-repeat-start="(key,value) in objs"> <p>学号: <span ng-bind="$index"></span> </p> <p> <span ng-bind="key"></span>: <span ng-bind="value"></span> </p> </div> <div ng-repeat-end></div></div>以上所述上就是本文的全部内容了,希望大家能够喜欢。
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
本文实例分析了AngularJS的ng-repeat指令与scope继承关系。分享给大家供大家参考,具体如下:ng-repeat指令的使用方式可以参考如下代码:
AngularJS指令用于扩展HTML。这些都是先从ng-前缀的特殊属性。我们将讨论以下指令:ng-app-该指令启动一个AngularJS应用。ng-init
AngularJSng-repeat指令AngularJS实例循环输出多个标题:{{x}}varapp=angular.module("myApp",[]);a
ng-repeat-start与ng-repeat-end时AngularJS(1.2.x)扩展的,使用这两个指令可以灵活控制遍历形式。例如:index.htm
AngularJS指令用于扩展HTML。这些都是先从ng-前缀的特殊属性。我们将讨论以下指令:ng-app-该指令启动一个AngularJS应用。ng-init