Angular学习笔记($filter)

发布时间:2019-06-20 发布网站:脚本宝典
脚本宝典收集整理的这篇文章主要介绍了Angular学习笔记($filter)脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。

AngularJS 里面的过滤器就是一个函数,它的作用就是将输入的数据经过格式化后再输出给user

Angular内置指令

HTML的模板中使用 | 符号来调用过滤器。

//大写
{{ 'hello' | upPErcase }}   // HELLO

//将一个json或js的对象转化成字符串
{{ {name: 'xl', age: 23} | JSON }}  // {'name': 'xl', 'age': 23}

//将数字格式转化成文本
{{ 123456789 | number }}  // 123,456,789

//limITTo过滤器会根据传入的数字来返回新的数组或者字符串
{{'This is sunny day' | limitTo: 4}}  // 'This'
{{['This', 'is', 'sunny', 'day'] | limitTo: 1 }}   // ['This']

//date格式化日期
VAR time = (new Date()).valueOf();
{{ time | date }}   // Oct 3, 2015

在Controller里面调用内置过滤器$filter

    var app = Angular.module('app', []);
    app.controller('MainContainer', function($scope, $filter){
        var time = (new Date()).valueOf();
        $filter(date)(time, 'yyyy-MM-dd');
        var string = 'Hello world';
        $filter('uppercase')(string);
    })
    
    //$filter(date)(time, 'yyyy-MM-dd') 第一个括号里面的参数代表调用哪个内置过滤器,第二个括号里面的参数代表向过滤器中传入的参数,第一个是参数是需要被格式化的数据,第二个参数代表格式。  

Angular自定义指令

    var app = angular.module('app', []);
    app.controller('mainCtrl', function($scope){
        
    });
    app.filter('slice', function(){
        return function(input){
            return input.slice(2);
        }
    });
    
    
    index.htML 
    {{ 'Hello' | slice }}  // 'llo'

向指令里传递参数

使用 : 来隔开每个参数

    var app = angular.module('app', []);
    app.controller('mainCtrl', function(){
    
    });
    
    app.filter('addString', function(){
        return function(input, stringOne, stringTwo){
            return input + ' ' + stringOne + ' ' + stringTwo;
        }
    })
    
    index.html
    
    {{ 'Hello' | addString:'world':'!!!' }} 
    // 'Hello world !!!'

过滤器优化

位于视图中的每个过滤器至少被调用2次,这是过滤器的本质。因此越是保持这些函数轻量及对它们进行优化,应用程序就会更快。

《Angular权威教程》里面对过滤器的优化提出了2种途径

一. 避免在视图中使用过滤器,尽可能在过滤逻辑移至控制器或服务中
二. 缓存过滤器的执行结果

参考资料:
Angular过滤器
Angular过滤器
AngularJS权威指南 1.2.x

脚本宝典总结

以上是脚本宝典为你收集整理的Angular学习笔记($filter)全部内容,希望文章能够帮你解决Angular学习笔记($filter)所遇到的问题。

如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。