星空网 > 软件开发 > Java

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>

效果:http://runjs.cn/detail/l16ogqjb




原标题:AngularJS之基本指令(init、repeat)

关键词:JS

JS
*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。

海天下:https://www.ikjzd.com/w/1573202450518024193
卖家港湾:https://www.ikjzd.com/w/1573202454343573506
麦家在线:https://www.ikjzd.com/w/1573202464342794242
邮件营销:https://www.ikjzd.com/w/1573202467089719297
mailigen:https://www.ikjzd.com/w/1573202474895319041
麦言社区:https://www.ikjzd.com/w/1573202480553779201
TikTok 将推出先买后付服务 :https://www.kjdsnews.com/a/1836651.html
TikTok 将推出先买后付服务 :https://www.goluckyvip.com/news/188219.html
相关文章
我的浏览记录
最新相关资讯
海外公司注册 | 跨境电商服务平台 | 深圳旅行社 | 东南亚物流