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