本文主要给大家介绍了Angular.Js过滤器过滤器与自定义过滤器滤波器的相关内容,分享出来供大家参考学习、下面来看看详细的介绍:
<李>大写|小写:大小写转换过滤李
<李> json: json格式过滤李
<李>日期:日期格式过滤李
<李>号码:数字格式过滤李
<李>货币:货币格式过滤李
<李>过滤器:查找李
<李> limitTo:字符串对象截取李
<李> orderBy:对象排序李
& lt; !DOCTYPE html>
& lt; html lang=皕h_CN”比;
& lt; head>
& lt;元charset=皍tf - 8”比;
& lt; title>角基础& lt;/title>
& lt;/head>
& lt; body>
& lt; div ng-app=癿yApp”比;
& lt; !——向表达式添加过滤器:可以通过一个管道字符(|)和一个过滤器添加到表达式中——比;
& lt; p>将字符串转换为大小写:& lt;/p>
& lt; div ng-controller=皍ppercaseController”比;
& lt; p>姓名为{{人。lastName |大写}}& lt;/p>
& lt;/div>
& lt; div ng-controller=發owercaseController”比;
& lt; p>姓名为{{人。lastName |小写}}& lt;/p>
& lt;/div>
& lt; p>货币过滤:& lt;/p>
& lt; div ng-controller=癱ostController”比;
数量:& lt;输入类型=笆俊眓g-model=笆俊北?
价格:& lt;输入类型=笆俊眓g-model=凹鄹瘛北?
& lt; p>总价={{(数量*价格)|货币}}& lt;/p>
{{250 |货币:人民币￥“}}
& lt;/div>
& lt; !——向指令添加过滤器:可以通过一个管道字符(|)和一个过滤器添加到指令中——比;
& lt; p>按国家的字母顺序排序对象:& lt;/p>
& lt; div ng-controller=皀amesController”比;
& lt; p>循环对象:& lt;/p>
& lt; ul>
& lt;李ng-repeat=" x的名字| orderBy:国家”在
{{x.name +”、“+ x。国家}}
& lt;/li>
& lt;/ul>
& lt; !——json格式过滤——比;
{{jsonText | json}} & lt; br/比;
& lt; !——日期格式过滤——比;
& lt; span>{{1288323623006 |日期:‘yyyy-MM-dd HH: mm: ss}} & lt;/span> & lt; br/比;
& lt; !——数字格式过滤——比;
{{1.2345678 |编号:1}}& lt; br/比;
& lt; !——字符串截取——比;
{{“我爱坦克”| limitTo: 6}} & lt; br/比;
{{“我爱坦克”| limitTo: 6}} & lt; br/比;
& lt; !——对象排序:降序——比;
{{[{" id ":“年龄”:20日10日“名称”:“iphone”},
{" id ":“年龄”:12日,11日,“名字”:“sunm兴”},
{“年龄”:44岁的“id”: 12,“名字”:“测试abc”}
)| orderBy:“id”:真}}& lt; br/比;
& lt; !——对象排序:升序——比;
{{[{" id ":“年龄”:20日10日“名称”:“iphone”},
{" id ":“年龄”:12日,11日,“名字”:“sunm兴”},
{“年龄”:44岁的“id”: 12,“名字”:“测试abc”}
)| orderBy:‘身份证’}}
& lt;/div>
& lt; p>按输入的字母显示对象:& lt;/p>
& lt; div ng-controller=皀amesFilterController”比;
& lt; p>输入过滤:& lt;/p>
& lt; p> & lt;输入类型=拔谋尽眓g-model=皀ame”祝辞& lt;/p>
& lt; ul>
& lt;李ng-repeat=" x的名字|过滤器:名字| orderBy:“国家”:真正的“比;
{{(x.name |大写)+”、“+ x。国家}}
& lt;/li>
& lt;/ul>
& lt; p>名字筛选:& lt;/p>
& lt; ul>
& lt;李ng-repeat=" x的名字|过滤器:{“名称”:名称}| orderBy:“国家”:真正的“比;
{{(x.name |大写)+”、“+ x。国家}}
& lt;/li>
& lt;/ul>
{{[{" id ":“年龄”:20日10日“名称”:“iphone”},
{" id ":“年龄”:12日,11日,“名字”:“sunm”},
{“年龄”:44岁的“id”: 12,“名字”:“测试abc”}
|过滤器:{“名称”:“sunm”}}}
& lt;/div>
& lt;/div>
& lt;脚本src=" https://www.yisu.com/zixun/angular.min.js "祝辞& lt;/script>
& lt;脚本类型=坝τ贸绦?javascript”比;
var myApp=angular.module (“myApp”, []);
myApp.controller (uppercaseController,函数(范围){
美元的范围。人={
名字:“约翰”,
姓:“母鹿”
};
});
myApp.controller (lowercaseController,函数(范围){
美元的范围。人={
名字:“约翰”,
姓:“母鹿”
};
});
myApp.controller (costController,函数(范围){
美元的范围。数量=1;
美元的范围。价格=9.99;
});
myApp.controller (namesController,函数(范围){
$ scope.names=(
{名称:贾尼,:“挪威”},
{名称:“海格”,:“瑞典”},
{名称:“凯”,:“丹麦”}
]；
$ scope.jsonText={foo:“酒吧”,记者:23};
});
myApp.controller (namesFilterController,函数(范围){
$ scope.names=(
{名称:贾尼,:“挪威”},
{名称:“海格”,:“瑞典”},
{名称:“凯”,:“丹麦”}
]；
});
& lt;/script>
& lt;/body>
& lt;/html>
