AngularJS学习笔记之基本指令(init、repeat)

AngularJS学习笔记之基本指令(init、repeat)

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102

<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>