angular.js常用内置指令

最新推荐文章于 2020-05-29 19:24:04 发布

chengzhang_jian

最新推荐文章于 2020-05-29 19:24:04 发布

阅读量570

点赞数

分类专栏： angularjs 文章标签： angularjs 常用的指令

本文链接：https://blog.csdn.net/chengzhang_jian/article/details/78047069

版权

angularjs 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

**指令，我将其理解为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等等。我就不一一列举了

chengzhang_jian

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
angular.js常用内置指令

**指令，我将其理解为AngularJS操作HTML element的一种途径。 AngularJS 指令是扩展的 HTML 属性，带有前缀 ng-。**angularjs指令：1.ngApp 写法：ng-app ng-app 指令初始化一个 AngularJS 应用程序。 ①启动ng ②指定作用范围，将指令写在根标签(html) 如：`html ng-app>//将根
复制链接

扫一扫