Angular学习笔记($filter)

taowen 发布于2019-08-21 10:41 / 1271人阅读

摘要：权威教程里面对过滤器的优化提出了种途径一避免在视图中使用过滤器，尽可能在过滤逻辑移至控制器或服务中二缓存过滤器的执行结果参考资料过滤器过滤器权威指南

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

GPU云服务器云服务器学习笔记学习笔记一基础学习笔记深度学习笔记

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/86020.html

angular2.0 笔记 - 01

angular2.0 学习笔记 ### 1.angular-cli 常用命令记录详细教程 angular cli官网有，这里不详细说明,感兴趣的可以自行到官网看，一下仅记录本人到学习过程常用到的命令 1.创建项目 ng new ng new project-name exp: ng new my-app 2.启动项目 ng serve 参数名类型默认值作用 exp ...

AnthonyHan 2019-08-23 16:48 评论0 收藏0
AngularJS学习笔记(1) --- 执行过程

摘要：前言由于在博客系统的开发中和近期工作中的前端框架主要使用因此在这里记录学习和使用的过程中遇到的一些需要记录的点。执行过程弄清楚的执行过程是很重要的，这样你才能在正确的时机做正确的事。至此，的执行过程也就告一段落了。前言由于在博客系统的开发中和近期工作中的前端框架主要使用 AngularJS ,因此在这里记录学习和使用 AngularJS 的过程中遇到的一些需要记录的点。特别说明，本...

taohonghui 2019-08-20 14:06 评论0 收藏0
Vue学习笔记（一）

摘要：一介绍也称为，读音类似，错误读音，由华人尤雨溪开源并维护。隐藏四事件之前说了一些关于事件的指令，这里详细学习一下事件的相关知识。还有一些其他键盘事件，具体参考官方文档。模板就是，用来进行数据绑定，显示在页面中，也称为语法。一、Vue.js介绍 Vue.js也称为Vue，读音类似view，错误读音v-u-e，由华人尤雨溪开源并维护。 Vue有以下特点：是一个构建用户界面的框架是一...

baoxl 2019-08-30 13:47 评论0 收藏0
Vue学习笔记（一）

摘要：一介绍也称为，读音类似，错误读音，由华人尤雨溪开源并维护。隐藏四事件之前说了一些关于事件的指令，这里详细学习一下事件的相关知识。还有一些其他键盘事件，具体参考官方文档。模板就是，用来进行数据绑定，显示在页面中，也称为语法。一、Vue.js介绍 Vue.js也称为Vue，读音类似view，错误读音v-u-e，由华人尤雨溪开源并维护。 Vue有以下特点：是一个构建用户界面的框架是一...

liukai90 2019-08-21 17:05 评论0 收藏0
Vue学习笔记（一）

摘要：一介绍也称为，读音类似，错误读音，由华人尤雨溪开源并维护。隐藏四事件之前说了一些关于事件的指令，这里详细学习一下事件的相关知识。还有一些其他键盘事件，具体参考官方文档。模板就是，用来进行数据绑定，显示在页面中，也称为语法。一、Vue.js介绍 Vue.js也称为Vue，读音类似view，错误读音v-u-e，由华人尤雨溪开源并维护。 Vue有以下特点：是一个构建用户界面的框架是一...

rollback 2019-08-01 17:49 评论0 收藏0