分享web开发知识

注册/登录|最近发布|今日推荐

主页 IT知识网页技术软件开发前端开发代码编程运营维护技术分享教程案例
当前位置:首页 > 技术分享

AngularJS 之 过滤器 Filter

发布时间:2023-09-06 01:12责任编辑:傅花花关键词:AngularAngularJS

一、内置过滤器

  1、大小写转换:

  uppercase、lowercase
 {{"lower cap string"| uppercase }} {{"Tank Is GOOD"| lowercase}} ?

  2、json格式化(将对象转换成json字符串),默认输出就是json字符串:

 ???{{ {name:‘zhangsan‘,age:15} }} ?????{{ {name:‘zhangsan‘,age:15}|json }} ?

  3、number格式化:

 ???{{1.2345|number:1}} ?  // 1.2 ???{{1.2345|number:3}} ?  // 1.235 ???{{1234567|number}} ?  // 1,234,567

  4、currecy货币格式化:

 ???{{500|currency}} ?        // $500.00  ???{{250|currency:‘RMB ¥ ‘}} ?  // RMB ¥ 250.00

  5、date格式化:

 ???var app = angular.module(‘myApp‘, []); ?????app.controller(‘myCtrl‘, function ($scope) { ?????????$scope.dateOne = new Date(); ?????????console.info(new Date().toJSON()); ?????????$scope.dateTwo = new Date().toJSON(); ?????????// /Date(1464941268937)/ ?????????$scope.dateThree = ‘1464941268937‘; ?????}); ?

  

 ???{{ 1304375948024 |date}} ?     // May 3, 2011  ???{{ dateOne |date:‘hh:mm:ss‘}} ?  // 09:19:20 ???{{ dateTwo |date:‘yyyy-MM-dd hh:mm:ss‘}} ?  // 2017-09-19 09:19:20 ???{{ dateThree |date:‘yyyy年MM月dd日‘}} ?    // 2016年06月03日

  6、filter查找:

 ???//查找含有有4的行 ?????{{ [{"age": 20,"id": 10,"name": "iphone"}, ?????{"age": 12,"id": 11,"name": "sunm xing"}, ?????{"age": 44,"id": 12,"name": "test abc"}] ??????| filter:‘4‘ }} ?????//查找name含有iphone的行 ?????{{ [{"age": 20,"id": 10,"name": "iphone"}, ?????{"age": 12,"id": 11,"name": "sunm xing"}, ?????{"age": 44,"id": 12,"name": "test abc"}] ??????| filter:{‘name‘:‘iphone‘} }} ?

  

 ???//查找含有有4的行 ????[{"age":44,"id":12,"name":"test abc"}] ????//查找name含有iphone的行 ????[{"age":20,"id":10,"name":"iphone"}]

  7、limitTo 字符串或对象的截取:

 ???{{‘i want you‘| limitTo:3}} ?  // i w ???{{‘i want you‘| limitTo:-3}} ?  // you ???{{[1,3,5]|limitTo:1}} ?      // [1] ????{{[1,3,5]|limitTo:-1}} ?     // [5]

  8、orderBy 对象排序:

 ???//根据id降序排 ?????????{{ [{"age": 20,"id": 10,"name": "iphone"}, ?????{"age": 12,"id": 11,"name": "sunm xing"}, ?????{"age": 44,"id": 12,"name": "test abc"}] ??????| orderBy:‘id‘:true }} ??????????//根据id升序排 ???????{{[{"age": 20,"id": 10,"name": "iphone"}, ?????{"age": 12,"id": 11,"name": "sunm xing"}, ?????{"age": 44,"id": 12,"name": "test abc"}] ??????| orderBy:‘id‘}} ??????????

  

 ???//根据id降序排 ????[{"age":44,"id":12,"name":"test abc"},{"age":12,"id":11,"name":"sunm xing"},{"age":20,"id":10,"name":"iphone"}] ???//根据id升序排 ????[{"age":20,"id":10,"name":"iphone"},{"age":12,"id":11,"name":"sunm xing"},{"age":44,"id":12,"name":"test abc"}]

  

二、自定义过滤器

  

 ???var app = angular.module(‘myApp‘, []); ???app.controller(‘myCtrl‘, function($scope) { ???????$scope.msg = "Runoob"; ???}); ???app.filter(‘reverse‘, function() { //可以注入依赖 ???????return function(text) { ???????????return text.split("").reverse().join(""); ???????} ???});

  

AngularJS 之 过滤器 Filter

原文地址:http://www.cnblogs.com/likwin/p/7554278.html

知识推荐

我的编程学习网——分享web前端后端开发技术知识。 垃圾信息处理邮箱 tousu563@163.com 网站地图
icp备案号 闽ICP备2023006418号-8 不良信息举报平台 互联网安全管理备案 Copyright 2023 www.wodecom.cn All Rights Reserved