AngularJS基础知识（三）之——常用指令、过滤器

最新推荐文章于 2019-02-26 21:04:39 发布

艾夏又更新了

最新推荐文章于 2019-02-26 21:04:39 发布

阅读量430

点赞数

CC 4.0 BY-SA版权

分类专栏： Angularjs 文章标签： angularjs

本文为艾夏SEO博主原创文章，未经博主允许不得转载。

本文链接：https://blog.youkuaiyun.com/I_intern/article/details/53580876

Angularjs 专栏收录该内容

5 篇文章

订阅专栏

常用指令

ng-hide指令，用于控制部分HTML元素可见(ng-hide=”false”)和不可见状态(ng-hide=”true”)，如下：

<div ng-app="" ng-init="click=false">
  <button ng-click="click= !click">我变</button>
  <p ng-hide="click">显示了。</p>
  <p ng-hide="!click">隐藏了。</p>
</div>
ng-show指令和ng-hide用法相同但行为相反，这里就不做详细介绍了。

扩展内容：

当我们面对一些长列表数据,可能会通过默认隐藏点击显示的形式来展现数据内容，当内容中也会伴随很多数据绑定，这个在页面渲染的时候非常影响性能。

举一个列子,比如说通常angular建议一个页面的数据绑定不超过2000个,假如现在有一个页面直接绑定了2000个model,然后你加载,会发现非常卡.如果你将其中100的model通过ng-show设置为不显示,你会发现还是很卡。

然后你试着将所有的ng-show换成ng-if,你会发现性能瞬间快的像两个应用,这是为什么呢，原因就在于ng-show指令虽然隐藏了但还是会执行其中的所有绑定，而ng-if就不同了，它只会在等于true的时候也就是显示的时候才去执行其中的绑定，这样一来性能就有很大的提高，所以在能使用ng-if的情况,用它代替所有的ng-show和ng-hide吧！

ng-repeat指令，遍历一个数据集合中的每个数据元素，并且加载HTML模版把数据渲染出来，当我们要向HTML容器节点中添加更多类似DOM元素的时候，使用ng-repeat是再好不过了。

使用方法，如下示例：

<div ng-app="" ng-init="friends = [
   {name:'Tom', age:25}, 
   {name:'Jerry', age:28},
   {name:'Tom', age:25}, 
   {name:'Jerry', age:28}]">

   <table>
 <tr ng-repeat="x in friends">
   <td> {{ 'Name：'+ x.name +' ，Age：'+ x.age}} </td>
 </tr>
   </table>
</div>
ng-repeat指令对于集合中(数组中)的每一项都会渲染一次HTML元素。

继续学习

过滤器

使用AngularJS过滤器可以实现对字符串的大小写转换、货币格式的转换、数组的过滤等等。

用法：管道字符(|)+过滤器名。

1.过滤器uppercase、lowercase对字符串转换大、小写，如下所示：

<div ng-app="">
请输入: <input type="text" ng-model="name">
结果为： {{ name | uppercase}}
</div>

使用方法很简单吧，在试试过滤器lowercase的效果吧！

过滤器currency，可以将数字转换成货币格式，参照上面的例子，试试吧。

filter过滤器可以过滤数组并从中选择出一个子集出来，用法是“filter:模型名称”，示例如下：

<div ng-app="" ng-init="friends = [
   {name:'tom', age:16},
   {name:'jerry', age:20}, 
   {name:'garfield', age:22}]">

    输入过滤:<input type="text" ng-model="name" >
    <ul style="list-style-type:none">
    <li>   姓名，年龄</li>
    <li  ng-repeat="x in friends | filter:name">   
        {{ x.name + ' , ' + x.age }}
    </li>
</ul>    
</div>

看到输出结果了吧，filter过滤器是不是很强大而且用法超简单就实现了对数据的简单过滤，如果不使用它，那我们想要实现这个数据过滤效果是不是要相当麻烦(可以自己试试如何实现)，而现在只需那么简单，足以彰显AngularJS是多么的给力呀！