首页 > 代码库 > Angular学习笔记01

Angular学习笔记01

2024-09-10 10:19:27   215人阅读

一、AngularJS的用途

  1. 把应用程序绑定到HTML元素
  2. 可以克隆和重复HTML元素
  3. 可显示和隐藏元素
  4. 可在HTML“背后”添加代码
  5. 支持输入验证

二、AngularJS指令

  1. ng-app：将Angular绑定于应用程序
  2. ng-model：将输入域（元素）的值绑定于应用程序
<div ng-app="">
  <p>名字 : <input type="text" ng-model="name"></p>
  <h1>Hello {{name}}</h1>
</div>

3.ng-bind：将变量name绑定到某个段落innerHTML

<div data-ng-app="" data-ng-init="firstName=‘zsz‘">
    <p>姓名为 <span data-ng-bind="firstName"></span></p>
    <p>{{firstName}}</p>
</div>

运行结果为：姓名为zsz
　　　　　  zsz

　　4.ng-init：初始化变量

技术分享 
  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>
View Code

 

Angular学习笔记01


联系
我们