Angular过滤器
主要用来格式化输出表达式的值。过滤器可以用于视图模板、控制器或者服务组件中。我们可以通过Angular的api轻松的实现过滤器。
表达式中添加过滤器
过滤器可以通过一个管道字符(|)和一个过滤器添加到表达式中
如何在模板中使用过滤器
{{ expression | filter }}
例如:
{{ 12 | currency }} 将会以货币格式输出 $12.00, currency是Angular提供的过滤器。
还可以将多个过滤器联合使用,
{{ expression | filter1 | filter2 | ... }}
过滤器可支持参数
{{ expression | filter:argument1:argument2:... }}
uppercase过滤器将字符串格式化为大写
<div ng-app="myApp" ng-controller="personCtrl">
<p>姓名为 {{ lastName | uppercase }}</p>
</div>
lowercase过滤器将字符串格式化为小写:
<div ng-app="myApp" ng-controller="personCtrl">
<p>姓名为 {{ lastName | lowercase }}</p>
</div>
currency过滤器将数字格式化为货币格式:
<div ng-app="myApp" ng-controller="costCtrl">
数量: <input type="number" ng-model="quantity">
价格: <input type="number" ng-model="price">
<p>总价 = {{ (quantity * price) | currency }}</p>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('costCtrl', function($scope) {
$scope.quantity = 1;
$scope.price = 9.99;
});
</script>
//总价=$9.99
自定义过滤器
//创建一个sqhApp模块
var app = angular.module("sqhApp",["ionic"], function($httpProvider) {});
//sqhApp模块下创建一个过滤器replaceStr,filter的第二个参数方法是没有任何参数的
angular.module("sqhApp").filter('replaceStr', function () {
// input 前一个命令的输入,需要处理的字符串
//startNum 第一个字符串的起始位置
// endNum 最后一个字符串的位置
// charCode 被替换字母
return function (input, startNum, endNum, charCode) {
//如果没有数据的时候,则返回空字符串
if (input == undefined || input == "") {
return "";
}
//没有指定隐藏显示的类型,则默认是*
if (charCode == undefined || charCode == "") {
charCode = "*";
}
var strArray = input.split("");
//console.log(strArray);
for (var i = startNum - 1; i < endNum; i++) {
strArray[i] = charCode;
}
return strArray.join("");
}
})
分享到:
相关推荐
详解AngularJS过滤器的用法_.docx
NULL 博文链接:https://bijian1013.iteye.com/blog/2391821
本篇文章主要介绍了angularjs过滤器-filter与ng-repeat的相关知识。具有很好的参考价值。下面跟着小编一起来看下吧
本文实例讲述了AngularJS过滤器filter用法。分享给大家供大家参考,具体如下: 在开发中,经常会遇到这样的场景 如用户的性别分为“男”和“女”,在数据库中保存的值为1和0,用户在查看自己的性别时后端返回的值...
AngularJS 过滤器 过滤器可以使用一个管道字符(|)添加到表达式和指令中。 AngularJS 过滤器 AngularJS 过滤器可用于转换数据: 过滤器 描述 currency 格式化数字为货币格式。 filter 从数组项中选择一个...
AngularJS 过滤器 过滤器可以使用一个管道字符(|)添加到表达式和指令中。 AngularJS 过滤器 AngularJS 过滤器可用于转换数据: 过滤器 描述 currency 格式化数字为货币格式。 filter 从数组项中选择一个...
给大家介绍下什么是 AngularJS? AngularJS是一个为动态WEB应用设计的结构框架。它能让你使用HTML作为模板语言,通过扩展HTML的语法,让你能更清楚、简洁地构建你的应用组件。它的创新点在于,利用
本文实例总结了AngularJS过滤器filter用法。分享给大家供大家参考,具体如下: 引言 filter过滤器对于我们来说并不陌生,他和我们现实生活中的过滤器的意思差不多,它的作用就是接收一个输入的值,然后按照某个规则...
本文实例讲述了Angularjs过滤器实现动态搜索与排序功能。分享给大家供大家参考,具体如下: 利用angularjs实现动态的插入以及利用过滤器进行数据的搜索以及排序. <!DOCTYPE html> <... ...www.jb51.net AngularJS...
AngularJS 过滤器可用于转换数据,这篇文章主要介绍了详解AngularJS 过滤器的使用,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
本文实例讲述了AngularJS过滤器filter用法。分享给大家供大家参考,具体如下: 这节我们来看看angularjs的过滤器filter。 在我们开发中经常需要在页面显示给用户的信息需要一定处理格式化,才能显示给用户。比如时间...
AngularJS 过滤器将句子和特别是团队名称大写。 分叉和大量修改 安装(尚未发布) 您可以使用安装过滤器: $ bower install yk.filters.capitalize 然后你必须将它包含在你的 HTML 中: < script src =" ...
主要为大家详细介绍了AngularJS过滤器的使用方法,感兴趣的小伙伴们可以参考一下
本文主要介绍AngularJS过滤器,这里整理了详细的资料和提供了示例代码及实例效果图,有兴趣的小伙伴可以参考下