AngularJs 过滤器

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("");  
    }  
  
})

猜你喜欢