angular过滤器filter常用方法,自定义过滤器

简单介绍AngularJS过滤器filter用法,每个都将列出用法代码以便加深了解;


内置过滤器:

currency(货币)、date(日期)、filter(子串匹配)、json(格式化json对象)、limitTo(限制个数)、lowercase(小写)、uppercase(大写)、number(数字)、orderBy(排序)
用法:
1.currency(货币)
使用currency可以将数字格式化为货币,默认美元符号,你可以自己传入所需的符号,如人民币:


<html>
    <head>
        <meta charset="utf-8" />
        <title>title>
        <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js">script>
    head>
    <body ng-app="myApp">
        <div style="width: 500px;margin: 0 auto;">
            <div ng-controller="homeCtr">
                <p>{{initNum | currency}}p>
                <p>{{initNum | currency:'¥'}}p>
                <ul ng-repeat="n in initArr">
                    <li>{{n | currency}}li>
                ul>
            div>
        div>
        <script type="text/javascript">
            var app = angular.module('myApp', []);
            app.controller('homeCtr',['$scope',function($scope){
                $scope.initNum = 10;
                $scope.initArr = [10,20,30,40,50];
            }])
        script>
    body>
html>

angular过滤器filter常用方法,自定义过滤器_第1张图片
2.date(日期)
原生的js对日期的格式化能力有限,ng提供的date过滤器基本可以满足一般的格式化要求。用法如下:

{{date | date : ‘yyyy-MM-dd hh:mm:ss EEEE’}}
参数用来指定所要的格式,y M d h m s E 分别表示 年 月 日 时 分 秒 星期,你可以自由组合它们。也可以使用不同的个数来限制格式化的位数。

<p>{{initDate | date:'yyyy/MM/dd hh:mm:ss EEEE'}}p>
<ul ng-repeat="n in initDateArr">
    <li>{{n | date:'yyyy.MM.dd hh:mm:ss'}}li>
ul>
//
$scope.initDate = '1523503158789';
$scope.initDateArr = [
    '1523502700688',
    '1523502953681',
    '1523502971335',
    '1523502980482'
]

angular过滤器filter常用方法,自定义过滤器_第2张图片
3 filter(匹配子串)
filter用来处理一个数组,然后可以过滤出含有某个子串的元素,作为一个子数组来返回。可以是字符串数组,也可以是对象数组。如果是对象数组,可以匹配属性的值。它接收一个参数,用来定义子串的匹配规则。

            <div ng-controller="homeCtr">
                <p>匹配属性值中包含'张'的所有项p>
                <ul ng-repeat="m in initMemberArr | filter:'张'">
                    <li>{{m.name}}li>
                    <li>{{m.age}}li>
                ul>
                <p>匹配属性值中包含 2的所有项p>
                <ul ng-repeat="m in initMemberArr | filter:2">
                    <li>{{m.name}}li>
                    <li>{{m.age}}li>
                ul>
                <p>匹配age属性值中包含 2的所有项p>
                <ul ng-repeat="m in initMemberArr | filter:{age:2}">
                    <li>{{m.name}}li>
                    <li>{{m.age}}li>
                ul>
                <p>匹配id属性值中包含 2,并且age属性中包含2的项p>
                <ul ng-repeat="m in initMemberArr | filter:{id:2} | filter:{age:2}">
                    <li>{{m.id}}li>
                    <li>{{m.name}}li>
                    <li>{{m.age}}li>
                ul>
                <p>匹配age属性值 大于 30的项p>
                <ul ng-repeat="m in initMemberArr | filter:ageFilt">
                    <li>{{m.id}}li>
                    <li>{{m.name}}li>
                    <li>{{m.age}}li>
                ul>
            div>
        app.controller('homeCtr',['$scope',function($scope){
                $scope.initMemberArr = [
                    {
                        id:12,
                        name:'张一',
                        age:20,
                    },
                    {
                        id:23,
                        name:'张二',
                        age:31,
                    },
                    {
                        id:34,
                        name:'李三',
                        age:12,
                    },
                    {
                        id:45,
                        name:'张五',
                        age:33,
                    },
                    {
                        id:56,
                        name:'李六',
                        age:24,
                    }
                ]
                //定义返回age属性大于30的方法
                $scope.ageFilt = function(arr){
                    return arr.age > 30;
                }
            }])

结果如下展示
angular过滤器filter常用方法,自定义过滤器_第3张图片
4.json(格式化json对象)
json过滤器可以把一个js对象格式化为json字符串,没有参数。一般也不会在页面上用,或者在js中用,作用如JSON.stringify(),文章最后会写出来在controller里面使用过滤器;权当看看

<p>{{testObj}}p>
<p>{{testObj | json}}p>
<p>{{initMemberArr}}p>
<p>{{initMemberArr | json}}p>
$scope.initMemberArr = [
    {
        id:12,
        name:'张一',
        age:20,
    },
    {
        id:23,
        name:'张二',
        age:31,
    }
]
$scope.testObj = {a:1,b:2};

5 limitTo(限制数组长度或字符串长度)
limitTo过滤器用来截取数组或字符串,接收一个参数用来指定截取的长度,如果参数是负值,则从数组尾部开始截取。

                <p>截取字符串前三位p>
                <p>{{initStr | limitTo:3}}p>
                <p>initMemberArr 数组截取前两项 ,每项的id截取前四位p>
                <ul ng-repeat = "m in initMemberArr | limitTo:2">
                    <li>{{m.id | limitTo:4}}li>
                ul>
                $scope.initMemberArr = [
                    {
                        id:'123456789',
                        name:'张一',
                        age:20,
                    },
                    {
                        id:'987654321',
                        name:'张二',
                        age:31,
                    },
                    {
                        id:'234765981',
                        name:'李三',
                        age:12,
                    }
                ]
                $scope.initStr = 'abcdefg';

angular过滤器filter常用方法,自定义过滤器_第4张图片
6 lowercase(小写)
把数据转化为全部小写
7 uppercase(大写)
把数据转化为全部大写

<p>{{str1 | uppercase}}p>
<p>{{str2 | lowercase}}p>

这两个用法很简单

$scope.str1 = 'abcf';
$scope.str2 = 'Abcd';

8 number(格式化数字)
number过滤器可以为一个数字加上千位分割,像这样,123,456,789。同时接收一个参数,可以指定float类型保留几位小数

                <p>{{num1 | number}}p>
                <p>保留四位小数p>
                <p>{{num2 | number:4}}p>
                <p>保留两位小数p>
                <p>{{num3 | number:2}}p>
$scope.num1 = 123456789;
$scope.num2 = 1357924680;
$scope.num3 = 1357.2498;

angular过滤器filter常用方法,自定义过滤器_第5张图片
9 orderBy(排序)
orderBy过滤器可以将一个数组中的元素进行排序,接收一个参数来指定排序规则,参数可以是一个字符串,表示以该属性名称进行排序。可以是一个函数,定义排序属性。还可以是一个数组,表示依次按数组中的属性值进行排序(若按第一项比较的值相等,再按第二项比较)

基本应用格式为:
ng-repeat=”item in itemList | orderBy:p1:p2”
参数p1可以是字段名或自定义函数,p2指是否逆序,默认是false
//
多字段排序:
ng-repeat=”item in itemList | orderBy:[orderIt,’name’,’-amount’]
第一个参数传递数组,可以是自定义函数或字段名,字段名前面加“-”,代表倒排序。

        <p>按照id排序p>
        <ul ng-repeat=" m in initMemberArr | orderBy : 'id'">
            <li>id:{{m.id}}-------name:{{m.name}}------age:{{m.age}}li>
        ul>
        <p>按照age排序p>
        <ul ng-repeat=" m in initMemberArr | orderBy : 'age'">
            <li>id:{{m.id}}-------name:{{m.name}}------age:{{m.age}}li>
        ul>
        <p>按照name排序p>
        <ul ng-repeat=" m in initMemberArr | orderBy : 'name'">
            <li>id:{{m.id}}-------name:{{m.name}}------age:{{m.age}}li>
        ul>
        <p>按照id降序p>
        <ul ng-repeat=" m in initMemberArr | orderBy : 'id':true">
            <li>id:{{m.id}}-------name:{{m.name}}------age:{{m.age}}li>
        ul>
        <p>按照id降序,字段前加-p>
        <ul ng-repeat=" m in initMemberArr | orderBy : '-id'">
            <li>id:{{m.id}}-------name:{{m.name}}------age:{{m.age}}li>
        ul>
        <p>多字段排序-按id升序,id一样的,按age的倒序,大的排前;p>
        <ul ng-repeat=" m in initMemberArr | orderBy :['id','-age']">
            <li>id:{{m.id}}-------name:{{m.name}}------age:{{m.age}}li>
        ul>
        $scope.initMemberArr = [
            {
                id:12,
                name:'张一',
                age:20,
            },
            {
                id:14,
                name:'张二',
                age:31,
            },
            {
                id:13,
                name:'李三',
                age:12,
            },
            {
                id:12,
                name:'老五',
                age:28,
            }
        ]

angular过滤器filter常用方法,自定义过滤器_第6张图片

自定义过滤器

    <p>将对象数组中每一项的name改成顺序的第几名p>
    <ul ng-repeat=" m in initMemberArr | joinStr">
        <li>id:{{m.id}}-------name:{{m.name}}------age:{{m.age}}li>
    ul>
    var app = angular.module('myApp', []);
    app.controller('homeCtr',['$scope',function($scope){
        $scope.initMemberArr = [
            {
                id:12,
                name:'张一',
                age:20,
            },
            {
                id:14,
                name:'张二',
                age:31,
            },
            {
                id:13,
                name:'李三',
                age:12,
            },
            {
                id:12,
                name:'老五',
                age:28,
            }
        ]

    }])
    app.filter('joinStr',function(){ //将对象数组中每一项的name改成顺序的第几名,当然这在页面直接用$index,更简单,这只是为了看写法;
       return function(arr){
             for(var i=0;i'第' + (i + 1) + '名';
           }
        return arr;
  }})

格式就是这样,你的处理逻辑就写在内部的那个闭包函数中。你也可以让自己的过滤器接收参数,参数就定义在return的那个函数中,作为第二个参数,或者更多个参数也可以。

过滤器使用

1.使用内置的过滤器,可以像上面写的,直接页面模版中使用,

{{ expression | filter }};

可以多个filter连用,

{{ expression | filter1 | filter2 | … }}

filter可以接收参数,参数用 : 进行分割

{{ expression | filter:argument1:argument2:… }}

2 在controller中使用,需要注入 $filter使用,
使用内置的过滤器

使用自定义的过滤器

            var app = angular.module('myApp', []);
            //注入$filter
            app.controller('homeCtr',['$scope','$filter',function($scope,$filter){
                $scope.initMemberArr = [
                    {
                        id:12,
                        name:'张一',
                        age:20,
                    },
                    {
                        id:14,
                        name:'张二',
                        age:31,
                    },
                    {
                        id:13,
                        name:'李三',
                        age:12,
                    },
                    {
                        id:12,
                        name:'老五',
                        age:28,
                    }
                ]
                //使用内置的过滤器
                $scope.resNum = $filter('currency')(123456789,'¥');
                console.log($scope.resNum);
                $scope.resStr = $filter('uppercase')('abcdefGh');
                console.log($scope.resStr);
                $scope.resSubStr = $filter('limitTo')('abcdefghi', 3);
                console.log($scope.resSubStr);
                ...
                ...
                ...
                //使用自定义的过滤器
                $scope.resArr = $filter('odditems')($scope.initMemberArr);
                console.log($scope.resArr);//只剩第一三项

            }]);

            //自定义过滤器,返回数组的奇数项;
            app.filter('odditems',function(){
              return function(inputArray){
                var array = [];
                for(var i=0;iif(i%2!==0){
                    array.push(inputArray[i]);
                  }
                }
                return array;
              }
            });

angular过滤器filter常用方法,自定义过滤器_第7张图片

看到这,差不多开发时filter过滤器用法都可以自己写出来哈,只要js知识好些,复杂的过滤器,复杂的自定义过滤器,差不多都可以实现………………………

你可能感兴趣的:(angularjs)