Angular学习笔记01

  1 <div ng-app="">
  2 　　<h3>ng-init初始化变量</h3>
  3 　　<div ng-init="name=‘aurora‘;age=‘18‘">
  4   　　<p ng-bind="name+‘,‘+age"></p>
  5   　　<p>{{name+‘,‘+age}}</p>
  6   　　<p ng-bind="name"></p>
  7   　　<p ng-bind="age"></p>
  8 　　</div>
  9 　　<h3>ng-init初始化对象</h3>
 10 　　<div ng-init="hero={name:‘aurora‘,role:‘sup‘,line:‘不管刮风还是下雨，太阳照常升起‘}">
 11  　　 <p ng-bind="hero.name+‘,‘+hero.role+‘,‘+hero.line"></p>
 12  　　 <p ng-bind="hero.name"></p>
 13   　　<p ng-bind="hero.role"></p>
 14   　　<p ng-bind="hero.line"></p>
 15 　　</div>
 16 　　<h3>ng-init初始化数组</h3>
 17 　　<div ng-init="heros=[‘曙光女神‘,‘堕落天使‘,‘魂锁典狱长‘]">
 18  　　 <p ng-bind="heros[0]+‘,‘+heros[1]+‘,‘+heros[2]"></p>
 19  　　 <p ng-bind="heros[0]"></p>
 20  　　 <p ng-bind="heros[1]"></p>
 21  　　 <p ng-bind="heros[2]"></p>
 22 　　</div>
 23   
 24 　　<h3>ng-controller控制器</h3>
 25 　　<div ng-controller="contr-2">
 26 　　  First Name: <input type="text" ng-model="firstName">
 27  　　 Last Name: <input type="text" ng-model="lastName">
 28  　　 Full Name : <span>{{firstName + "," + lastName}}</span>
 29  　　 Full Name : <span ng-bind="firstName + ‘,‘ + lastName"></span>  
 30 　　</div>
 31   
 32 　　<h3>ng-repeat遍历无重复集合</h3>
 33 　　<div ng-init="names=[1,2,3]">
 34 　　 <ul>
 35  　　 <li ng-repeat="x in names">
 36  　　  {{x}}
 37  　　 </li>
 38 　　 </ul>
 39 　　</div>
 40 　　<h3>ng-repeat遍历重复集合</h3>
 41 　　<div ng-init="number=[1,2,2,3]">
 42 　　 <ul>
 43  　　 <li ng-repeat="x in number track by $index">
 44   　　 {{x}}
 45   　　</li>
 46 　　 </ul>
 47 　　</div>
 48 　　<h3>ng-repeat遍历对象</h3>
 49 　　<div ng-controller="contr-3">
 50   　　 <ul>
 51    　　 <li ng-repeat="(key,value) in object track by $index">
 52     　　 {{key+":"+value}}
 53    　　 </li>
 54   　　 </ul>
 55 　　</div>
 56 　　<h3>ng-repeat遍历对象(按原有顺序)</h3>
 57 　　<div ng-controller="contr-4">
 58    　　<ul ng-repeat="obj in objs ">
 59     　　<li ng-repeat="(key,value) in obj ">
 60     　　 {{key+":"+value}}
 61    　　 </li>
 62   　　 </ul>
 63 　　</div>
 64 　　<h3>ng-repeat遍历对象(属性详解)</h3>
 65 　　<table ng-controller="contr-5">
 66 　　  <tr ng-repeat="(key, value) in objs ">
 67   　　  <td>学号:
 68    　　   <span ng-bind="$index"></span>
 69   　　  </td>
 70     　　<td>
 71      　　 <span ng-bind="key"></span>:
 72      　　 <span ng-bind="value"></span>
 73    　　 </td>
 74     　　<td>是否为奇数？
 75      　　 <span ng-bind="$odd"></span>
 76     　　</td>
 77     　　<td>是否为偶数？
 78      　　 <span ng-bind="$even"></span>
 79     　　</td>
 80     　　<td>排行是老大？
 81      　　 <span ng-bind="$first"></span>
 82     　　</td>
 83     　　<td>排行最小？
 84      　　 <span ng-bind="$last"></span>
 85    　　 </td>
 86     　　<td>排行中间？
 87      　　 <span ng-bind="$middle"></span>
 88     　　</td>
 89  　　 </tr>
 90 　　</table>
 91 　　<h3>ng-repeat start/end</h3>
 92 　　<div ng-controller="contr-6">
 93 　　  <div ng-repeat-start="(key,value) in objs">
 94   　　  <p>学号:
 95    　　   <span ng-bind="$index"></span>
 96    　　 </p>
 97   　　  <p>
 98   　　    <span ng-bind="key"></span>:
 99    　　   <span ng-bind="value"></span>
100    　　 </p>
101  　　 </div>
102  　　 <div ng-repeat-end></div>
103 　　</div> 
104 </div>