angular.js常用内置指令

来源：互联网发布：淘宝演唱会门票可靠吗编辑：程序博客网时间：2024/06/05 14:48

**指令，我将其理解为AngularJS操作HTML element的一种途径。
AngularJS 指令是扩展的 HTML 属性，带有前缀 ng-。**

angularjs指令：

1.ngApp

写法：ng-app
ng-app 指令初始化一个 AngularJS 应用程序。
①启动ng
②指定作用范围，将指令写在根标签(html)
如：

`<!DOCTYPE html><html ng-app>//将根节点作为指定的范围<head lang="en"></head></html>`

2：ngInit 指令来完成数据的初始化

写法： <any ng-init="a=1;b=2"/>
①不需要在通过ngInit指令定义数据时候，加上var关键字
②ngInit所初始化的变量是可以在整个html去使用变量
通过ngInit调用一次，初始化多个变量？？

<!--通过ngInit指令定义一个数组--><span ng-init=" list=[100,200,300]">  {{list[1]}}   //100</span><p>{{list[1]}}</p> // 200<span ng-init="car={name:'BMW',price:20}">  {{"汽车的价格为："+car.price}} //汽车的价格为20</span>

3.{{}} 常用表达式

写法：<any>{{XXX}}</any>

<!DOCTYPE html><html ng-app><head lang="en">  <meta charset="UTF-8">  <script src="js/angular.js"></script>  <title></title></head><body><!--算术运算--><h1>{{3*5}}</h1><!--比较运算符--><span>{{3>5}}</span><!-- 逻辑运算 && || ！ --><p>真与假的与运算：{{true && false}}</p><!--三目运算符--><p>{{3>2?'大于':'小于等于'}}</p></body></html>

值得注意的是只有在指令ng-app指定范围才有效。

4 ngIf:选择是否要显示出来（挂载到DOM，从DOM中删除）

写法：

<table ng-init="stuList=[  {name:'zhangsan',score:80,sex:'male'},  {name:'Reese',score:81,sex:'male'},  {name:'Finch',score:82,sex:'male'},  {name:'Lincoln',score:83,sex:'male'},  {name:'TBag',score:84,sex:'male'},  ]">  <thead>    <tr>      <th>名称</th>      <th>成绩</th>      <th>性别</th>    </tr>  </thead>  <tbody>    <tr ng-if="tmp.score > 82" ng-repeat="tmp in stuList">      <td>{{tmp.name}}</td>      <td>{{tmp.score}}</td>      <td>{{tmp.sex}}</td>    </tr>  </tbody>

5 ngShow/ngHide 选择是否要显示出来(显示或者隐藏)

写法：

<div ng-init="isMemeber=false;            hasMore=false;            isFormValid=false;            isAgree=true;            imgUrl='1.jpg'">    <p ng-if="isMemeber">仅会员可见</p>    <button ng-show="hasMore">加载更多</button>    <p ng-hide="hasMore">没有更多数据可以加载了</p>    <img ng-src="img/{{imgUrl}}" alt=""/>    是否同意<input type="checkbox" ng-checked="isAgree"/>    <br/>    <button ng-disabled="!isFormValid">      注册    </button>

6 ngSrc 相当于src 用来显示图片的路径

写法：<img ng-src="img/{{imgUrl}}" />
注意：在使用ngSrc去读取变量中值的时候，要记得加上双花括号。如果你写的不是ngSrc而是src，显示是ok的，但是控制台是会报错的，通过ngSrc去指定就搞定了

 <img ng-src="img/{{imgUrl}}" alt=""/>

7 ngdisabled是否禁用摸个控件

写法：<any ng-disabled='表达式'></any>

8 ngchecked 是否选中

9 ngRepeat重复实例化模板

使用ngRpeat的时候要遍历的集合默认是不允许有重复的数据，可以通过 track by $index来指定一个不会重复的值就可以解决报错的问题。
如：

<!--$index是在使用ngRepeat时所提供的特殊属性，记录的是迭代的偏移量-->//如果遍历的集合有重复的数据的话：//正确的写法：<ul ng-init='myList=[10,10,20,30]'>  <li ng-repeat="tmp in myList track by $index">    {{"$index is "+$index+" tmp is "+tmp}}  </li></ul>//报错：<ul ng-init='myList=[10,10,20,30]'>  <li ng-repeat="tmp in myList ">    {{"$index is "+$index+" tmp is "+tmp}}  </li></ul>

这里放一个demo供大家参考：

<!DOCTYPE html><html ng-app><head lang="en">  <meta charset="UTF-8">  <title></title>  <script src="js/angular.js"></script></head><body>/二种语法：//<any ng-repeat="临时变量的名称 in 集合的名称"></any>//<any ng-repeat="（key,value） in 集合的名称"></any>  <div ng-init="isMemeber=false;            hasMore=false;            isFormValid=false;            isAgree=true;            imgUrl='1.jpg'">    <p ng-if="isMemeber">仅会员可见</p>    <button ng-show="hasMore">加载更多</button>    <p ng-hide="hasMore">没有更多数据可以加载了</p>    <img ng-src="img/{{imgUrl}}" alt=""/>    是否同意<input type="checkbox" ng-checked="isAgree"/>    <br/>    <button ng-disabled="!isFormValid">      注册    </button>  </div></body></html>

“`
这只是angularjs常用到的指令。当然hai有很多指令如ngBind,ngchange,ngClassEven,ngCopy等等。我就不一一列举了

阅读全文

0 0