文档章节

AngularJS实战之filter的使用一

柳絮飞祭奠
 柳絮飞祭奠
发布于 2017/09/11 12:33
字数 428
阅读 1
收藏 0

一、格式化数字为货币格式

<div>{{money|currency:"$"}}</div>  
<div>{{money|currency:"RMB"}}</div>  
script:
app.controller("crl", function($scope, $filter) {  
        $scope.money="4545";  
    });  

显示为:$4,545.00 RMB4,545.00

二、lowercase 格式化字符串为小写。

姓名为 {{ lastName | lowercase }} 
app.controller("crl", function($scope, $filter) {  
     $scope.lastName ="AAA";  
});  

显示为 aaa

三、uppercase 格式化字符串为大写。

姓名为 {{ lastName | uppercase }}  
app.controller("crl", function($scope, $filter) {  
     $scope.lastName ="aaa";  
});  

显示为:AAA

四、filter 从数组项中选择一个子集。

<div>{{array|filter:"s"}}</div>  
<div ng-repeat="item in array|filter:'s'">{{item.name}}</div>  
app.controller("crl", function($scope, $filter) {  
        $scope.array = [ {  
            name : 'Tobias'  
        }, {  
            name : 'Jeff'  
        }, {  
            name : 'Brian'  
        }, {  
            name : 'Igor'  
        }, {  
            name : 'James'  
        }, {  
            name : 'Brad'  
        } ];  
    });  

显示中只展示字符串中带有s的 [{"name":"Tobias"},{"name":"James"}] Tobias James

五、orderBy 根据某个表达式排列数组。

说明:输入过滤器可以通过一个管道字符(|)和一个过滤器添加到指令中,该过滤器后跟一个冒号和一个模型名称。模型名字前加负号为降序,默认为升序

<div ng-repeat="item in array|orderBy:'-name'">降序   {{item.name}}</div>  
    <div ng-repeat="item in array|orderBy:'name'">升序     {{item.name}}</div>  

app.controller("crl", function($scope, $filter) {  
        $scope.array = [ {  
            name : 'Tobias',age:"18"  
        }, {  
            name : 'Jeff',age:"19"  
        }, {  
            name : 'Brian',age:"19"  
        }, {  
            name : 'Igor',age:"55"  
        }, {  
            name : 'James',age:"19"  
        }, {  
            name : 'Brad',age:"19"  
        } ,{  
            name : 'aaas',age:"19"  
        }];  
        
    });  

显示为 降序 Tobias

降序 Jeff

降序 James

降序 Igor

降序 Brian

降序 Brad

降序 aaas

升序 aaas

升序 Brad

升序 Brian

升序 Igor

升序 James

升序 Jeff

升序 Tobias

5.1.多个模型排序(先按名字排序在按年龄排序)

<div ng-repeat="item in array|orderBy:['name','age']">升序     {{item.name}}{{item.age}}</div>  
app.controller("crl", function($scope, $filter) {  
        $scope.array = [ {  
            name : 'Tobias',age:"18"  
        }, {  
            name : 'Jeff',age:"19"  
        }, {  
            name : 'Brian',age:"19"  
        }, {  
            name : 'Igor',age:"55"  
        }, {  
            name : 'James',age:"19"  
        }, {  
            name : 'adsd',age:"19"  
        } ,{  
            name : 'adsd',age:"20"  
        }];  
  
    }); 

显示为 升序 adsd19

升序 adsd20

升序 Brian19

升序 Igor55

升序 James19

升序 Jeff19

升序 Tobias18

© 著作权归作者所有

共有 人打赏支持
柳絮飞祭奠
粉丝 0
博文 11
码字总数 2890
作品 0
合川
AngularJs学习笔记--I18n/L10n

一、I18n and L10n in AngularJS 1. 什么是I18n和L10n?   国际化(Internationalization),简称I18n,是让产品开发在一个他们可以简单地对产品进行语言、文化的本地化的方法的规范。本地化...

武文海
2015/02/06
0
0
AngularJs学习笔记--expression

一、Angular表达式 vs. Js 表达式   这很容易让人将angular视图表达式联想为javascript表达式,但这并不完全正确,因为angular不是通过javascript的eval()对表达式进行求值。你可以将angul...

武文海
2015/02/06
0
0
Angular 实战教程 - Today 系列文章目录

Angular 实战教程 - Today 系列文章目录 发布于 10:15 文章被以下专栏收录

小温
07/18
0
0
Angular.js 相关记录

AngularJS作用域文档:http://docs.angularjs.org/api/ng.$rootScope.Scope ng-view 指令的角色是为当前路由把对应的视图模板载入到布局模板中。 AngularJS内置过滤器:http://code.angular...

彭博
2014/04/25
0
2
Angular中ui-grid的使用详解

Angular中ui-grid的使用   在项目开发的过程中,产品经理往往会提出各种需求,以提高用户体验。最近,项目中用到的表格特别多,而且表格的列数和行数也超多。为了让用户浏览更爽,产品经理...

半指温柔乐
08/05
0
0

没有更多内容

加载失败,请刷新页面

加载更多

TypeScript基础入门之声明合并(一)

转发 TypeScript基础入门之声明合并(一) 声明合并 介绍 TypeScript中的一些独特概念描述了类型级别的JavaScript对象的形状。 TypeScript特别独特的一个例子是"声明合并"的概念。 在使用现有J...

durban
16分钟前
1
0
Mysql-db

aptitude install default-libmysqlclient-dev pip install mysql-python

dragon_tech
20分钟前
1
0
函数装饰器

def debug(func): def wrapper(*args, **kwargs): # 多个参数# def wrapper(something): # 指定一样的参数 print("[DEBUG]: enter {}()".format(func.__name__)) ......

colin_86
23分钟前
1
0
Notification-状态栏上的通知

当程序并不是出在运行状态的时候,可以调用Notification来显示通知。 1、创建 Notification的创建主要涉及到三个类:NotificationManager,Notification和PendingIntent NotificationManager主...

西米小娅
25分钟前
1
0
Failed to configure a DataSource: 'url' attribute is not specified and no embedded datasource c

spring boot启动报错: Description: Failed to configure a DataSource: 'url' attribute is not specified and no embedded datasource could be configured. Reason: Failed to determin......

wenzhizhon
27分钟前
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部