angularJS----filter

发布时间：2020-12-17 10:37:26 所属栏目：安全来源：网络整理

导读：?? angularJS过滤器过滤器（filter）正如其名，作用就是，通过某个规则进行处理，然后返回处理后的结果。主要用在数据的格式化上，例如获取一个数组中的子集，对数组中的元素进行排序等。 ng内置了一些过滤器，它们是：currency(货币)、date(日期)、filter

??　　　　angularJS过滤器

　　　　过滤器（filter）正如其名，作用就是，通过某个规则进行处理，然后返回处理后的结果。主要用在数据的格式化上，例如获取一个数组中的子集，对数组中的元素进行排序等。

　　　　ng内置了一些过滤器，它们是：currency(货币)、date(日期)、filter(子串匹配)、json(格式化json对象)、limitTo(限制个数)、lowercase(小写)、uppercase(大写)、number(数字)、orderBy(排序)。总共九种。除此之外还可以自定义过滤器，这个就强大了，可以满足任何要求的数据处理。

　　　　过滤器的使用：过滤器可以使用一个管道字符（|）添加到和中。

　　　　具体使用：

　　　currency（格式化货币单位）

　　　　　格式：| currency：[-货币单位（可以自定义，默认是$）] ：[-小数指定位数（自动四舍五入）,默认是2位小数]　　注：本章凡是有[-] ，代表是可选参数

Document {{ 12 + 12 + 0.01 | currency}} $12.00 {{ 12.45 | currency:'￥'}} {{ 12.45 | currency:'CHY￥':3}} {{ 12.55 | currency:undefined:2}}

　　　　效果如下：

　　date（格式化日期）

　　　　格式： ?| date: MM *dd* yyyy * h* mma ? ?注：y ?M ?d ?h ?m ?s ?E 分别表示年月日时分秒星期

　　　　*号表示随意插入符号（如：- ?/ ?: 年，月，日等）你可以自由组合它们。也可以使用不同的个数来限制格式化的位数。我们完全可以根据自己的意愿组合出想要的格式

{{ '2015-05-20T03:56:16.887Z' | date:"MM/dd/yyyy h:mma"}} {{ 1432075948123 | date:"MM/dd/yyyy h:mma"}} {{ 1432075948123 | date:"MM/dd/yyyy h:mma":"UTC"}} {{'04/07/2017' | date: 'yyyy年MM月dd日'}}

　　效果如下：

　　filter（匹配子串）

　　　　这个名叫filter的filter（不得不说这名字起的，真让人容易混淆—_—！）用来处理一个数组，然后可以过滤出含有某个子串的元素，作为一个子数组来返回。可以是字符串数组，也可以是对象数组。如果是对象数组，可以匹配属性的值。格式： ?| filter ： fn/string/obj ?接收一个参数，用来定义子串的匹配规则。个人感觉有点像模糊匹配的意思。

Document 　　//匹配属性值含有“m”的 {{ arr | filter : 'm' }}　　//匹配属性值含有20的 {{ arr | filter : 20 }}　　//参数是对象，匹配name属性中含有 ‘a’的 {{ arr | filter : {name: "a"} }}　　//参数是函数，指定返回符合条件的项 {{ arr | filter : fn }}

<span style="color: #0000ff"&gt;<</span><span style="color: #800000"&gt;script</span><span style="color: #0000ff"&gt;></span>
    <span style="background-color: #f5f5f5; color: #0000ff"&gt;var</span><span style="background-color: #f5f5f5; color: #000000"&gt; myApp </span><span style="background-color: #f5f5f5; color: #000000"&gt;=</span><span style="background-color: #f5f5f5; color: #000000"&gt; angular.module(</span><span style="background-color: #f5f5f5; color: #000000"&gt;'</span><span style="background-color: #f5f5f5; color: #000000"&gt;myApp</span><span style="background-color: #f5f5f5; color: #000000"&gt;'</span><span style="background-color: #f5f5f5; color: #000000"&gt;,[]);
    myApp.controller(</span><span style="background-color: #f5f5f5; color: #000000"&gt;'</span><span style="background-color: #f5f5f5; color: #000000"&gt;myContrl</span><span style="background-color: #f5f5f5; color: #000000"&gt;'</span><span style="background-color: #f5f5f5; color: #000000"&gt;,[</span><span style="background-color: #f5f5f5; color: #000000"&gt;"</span><span style="background-color: #f5f5f5; color: #000000"&gt;$scope</span><span style="background-color: #f5f5f5; color: #000000"&gt;"</span><span style="background-color: #f5f5f5; color: #000000"&gt;,</span><span style="background-color: #f5f5f5; color: #0000ff"&gt;function</span><span style="background-color: #f5f5f5; color: #000000"&gt;($scope){
        $scope.arr</span><span style="background-color: #f5f5f5; color: #000000"&gt;=</span><span style="background-color: #f5f5f5; color: #000000"&gt;[
            {name:</span><span style="background-color: #f5f5f5; color: #000000"&gt;'</span><span style="background-color: #f5f5f5; color: #000000"&gt;tom</span><span style="background-color: #f5f5f5; color: #000000"&gt;'</span><span style="background-color: #f5f5f5; color: #000000"&gt;,age: </span><span style="background-color: #f5f5f5; color: #000000"&gt;18</span><span style="background-color: #f5f5f5; color: #000000"&gt;},{name:</span><span style="background-color: #f5f5f5; color: #000000"&gt;'</span><span style="background-color: #f5f5f5; color: #000000"&gt;sam</span><span style="background-color: #f5f5f5; color: #000000"&gt;'</span><span style="background-color: #f5f5f5; color: #000000"&gt;,age: </span><span style="background-color: #f5f5f5; color: #000000"&gt;19</span><span style="background-color: #f5f5f5; color: #000000"&gt;},{name:</span><span style="background-color: #f5f5f5; color: #000000"&gt;'</span><span style="background-color: #f5f5f5; color: #000000"&gt;jack</span><span style="background-color: #f5f5f5; color: #000000"&gt;'</span><span style="background-color: #f5f5f5; color: #000000"&gt;,age: </span><span style="background-color: #f5f5f5; color: #000000"&gt;20</span><span style="background-color: #f5f5f5; color: #000000"&gt;},{name:</span><span style="background-color: #f5f5f5; color: #000000"&gt;'</span><span style="background-color: #f5f5f5; color: #000000"&gt;hellen</span><span style="background-color: #f5f5f5; color: #000000"&gt;'</span><span style="background-color: #f5f5f5; color: #000000"&gt;,age: </span><span style="background-color: #f5f5f5; color: #000000"&gt;21</span><span style="background-color: #f5f5f5; color: #000000"&gt;}
        ];
        $scope.fn</span><span style="background-color: #f5f5f5; color: #000000"&gt;=</span><span style="background-color: #f5f5f5; color: #0000ff"&gt;function</span><span style="background-color: #f5f5f5; color: #000000"&gt;(e){
            </span><span style="background-color: #f5f5f5; color: #0000ff"&gt;return</span><span style="background-color: #f5f5f5; color: #000000"&gt; e.age</span><span style="background-color: #f5f5f5; color: #000000"&gt;<</span> <span style="background-color: #f5f5f5; color: #000000"&gt;21</span><span style="background-color: #f5f5f5; color: #000000"&gt;;
        }
    }])
</span><span style="color: #0000ff"&gt;</</span><span style="color: #800000"&gt;script</span><span style="color: #0000ff"&gt;></span>

</body>
</html>

　　效果如下：

　　json（格式化json对象） ?

　　　　格式： ?| json ? ? 无参数 ? ?json过滤器可以把一个js对象格式化为json字符串 ?作用就和我们熟悉的JSON.stringify()一样。用法超级简单：




    
    Document
    


    
    {{ oJson | json }}
<span style="color: #0000ff"&gt;<</span><span style="color: #800000"&gt;script</span><span style="color: #0000ff"&gt;></span>
    <span style="background-color: #f5f5f5; color: #0000ff"&gt;var</span><span style="background-color: #f5f5f5; color: #000000"&gt; myApp </span><span style="background-color: #f5f5f5; color: #000000"&gt;=</span><span style="background-color: #f5f5f5; color: #000000"&gt; angular.module(</span><span style="background-color: #f5f5f5; color: #000000"&gt;'</span><span style="background-color: #f5f5f5; color: #000000"&gt;myApp</span><span style="background-color: #f5f5f5; color: #000000"&gt;'</span><span style="background-color: #f5f5f5; color: #000000"&gt;,</span><span style="background-color: #f5f5f5; color: #0000ff"&gt;function</span><span style="background-color: #f5f5f5; color: #000000"&gt;($scope){
        $scope.oJson</span><span style="background-color: #f5f5f5; color: #000000"&gt;=</span><span style="background-color: #f5f5f5; color: #000000"&gt;[
            {
                </span><span style="background-color: #f5f5f5; color: #000000"&gt;"</span><span style="background-color: #f5f5f5; color: #000000"&gt;name</span><span style="background-color: #f5f5f5; color: #000000"&gt;"</span><span style="background-color: #f5f5f5; color: #000000"&gt;: </span><span style="background-color: #f5f5f5; color: #000000"&gt;"</span><span style="background-color: #f5f5f5; color: #000000"&gt;jjk</span><span style="background-color: #f5f5f5; color: #000000"&gt;"</span><span style="background-color: #f5f5f5; color: #000000"&gt;,</span><span style="background-color: #f5f5f5; color: #000000"&gt;"</span><span style="background-color: #f5f5f5; color: #000000"&gt;age</span><span style="background-color: #f5f5f5; color: #000000"&gt;"</span><span style="background-color: #f5f5f5; color: #000000"&gt;: </span><span style="background-color: #f5f5f5; color: #000000"&gt;18</span><span style="background-color: #f5f5f5; color: #000000"&gt;
            },{
                </span><span style="background-color: #f5f5f5; color: #000000"&gt;"</span><span style="background-color: #f5f5f5; color: #000000"&gt;name</span><span style="background-color: #f5f5f5; color: #000000"&gt;"</span><span style="background-color: #f5f5f5; color: #000000"&gt;: </span><span style="background-color: #f5f5f5; color: #000000"&gt;"</span><span style="background-color: #f5f5f5; color: #000000"&gt;dk</span><span style="background-color: #f5f5f5; color: #000000"&gt;"</span><span style="background-color: #f5f5f5; color: #000000"&gt;,</span><span style="background-color: #f5f5f5; color: #000000"&gt;"</span><span style="background-color: #f5f5f5; color: #000000"&gt;age</span><span style="background-color: #f5f5f5; color: #000000"&gt;"</span><span style="background-color: #f5f5f5; color: #000000"&gt;: </span><span style="background-color: #f5f5f5; color: #000000"&gt;19</span><span style="background-color: #f5f5f5; color: #000000"&gt;
            }
        ];
        $scope.fn</span><span style="background-color: #f5f5f5; color: #000000"&gt;=</span><span style="background-color: #f5f5f5; color: #0000ff"&gt;function</span><span style="background-color: #f5f5f5; color: #000000"&gt;(e){
            </span><span style="background-color: #f5f5f5; color: #0000ff"&gt;return</span><span style="background-color: #f5f5f5; color: #000000"&gt; e.age</span><span style="background-color: #f5f5f5; color: #000000"&gt;<</span> <span style="background-color: #f5f5f5; color: #000000"&gt;21</span><span style="background-color: #f5f5f5; color: #000000"&gt;;
        }
    }])
</span><span style="color: #0000ff"&gt;</</span><span style="color: #800000"&gt;script</span><span style="color: #0000ff"&gt;></span>
<span style="color: #0000ff"></<span style="color: #800000">body<span style="color: #0000ff">>

<span style="color: #0000ff"></<span style="color: #800000">html<span style="color: #0000ff">>

　　效果如下：

　　limitTo（限制数组长度或者字符串长度）

　　　　limitTo过滤器用来截取数组或字符串，接收一个参数用来指定截取的长度 ?注：只能从数组或者字符串的开头截取

Document {{ oJson | limitTo : 1 }}

<span style="color: #0000ff"&gt;<</span><span style="color: #800000"&gt;script</span><span style="color: #0000ff"&gt;></span>
    <span style="background-color: #f5f5f5; color: #0000ff"&gt;var</span><span style="background-color: #f5f5f5; color: #000000"&gt; myApp </span><span style="background-color: #f5f5f5; color: #000000"&gt;=</span><span style="background-color: #f5f5f5; color: #000000"&gt; angular.module(</span><span style="background-color: #f5f5f5; color: #000000"&gt;'</span><span style="background-color: #f5f5f5; color: #000000"&gt;myApp</span><span style="background-color: #f5f5f5; color: #000000"&gt;'</span><span style="background-color: #f5f5f5; color: #000000"&gt;,</span><span style="background-color: #f5f5f5; color: #000000"&gt;"</span><span style="background-color: #f5f5f5; color: #000000"&gt;age</span><span style="background-color: #f5f5f5; color: #000000"&gt;"</span><span style="background-color: #f5f5f5; color: #000000"&gt;: </span><span style="background-color: #f5f5f5; color: #000000"&gt;19</span><span style="background-color: #f5f5f5; color: #000000"&gt;
            }
        ];
        $scope.fn</span><span style="background-color: #f5f5f5; color: #000000"&gt;=</span><span style="background-color: #f5f5f5; color: #0000ff"&gt;function</span><span style="background-color: #f5f5f5; color: #000000"&gt;(e){
            </span><span style="background-color: #f5f5f5; color: #0000ff"&gt;return</span><span style="background-color: #f5f5f5; color: #000000"&gt; e.age</span><span style="background-color: #f5f5f5; color: #000000"&gt;<</span> <span style="background-color: #f5f5f5; color: #000000"&gt;21</span><span style="background-color: #f5f5f5; color: #000000"&gt;;
        }
    }])
</span><span style="color: #0000ff"&gt;</</span><span style="color: #800000"&gt;script</span><span style="color: #0000ff"&gt;></span>

</body>
</html>

　　效果如下：

　　lowercase(小写)

　　　　把数据转化为全部小写。格式： | lowercase

Document {{ str |lowercase }}

<span style="color: #0000ff"&gt;<</span><span style="color: #800000"&gt;script</span><span style="color: #0000ff"&gt;></span>
    <span style="background-color: #f5f5f5; color: #0000ff"&gt;var</span><span style="background-color: #f5f5f5; color: #000000"&gt; myApp </span><span style="background-color: #f5f5f5; color: #000000"&gt;=</span><span style="background-color: #f5f5f5; color: #000000"&gt; angular.module(</span><span style="background-color: #f5f5f5; color: #000000"&gt;'</span><span style="background-color: #f5f5f5; color: #000000"&gt;myApp</span><span style="background-color: #f5f5f5; color: #000000"&gt;'</span><span style="background-color: #f5f5f5; color: #000000"&gt;,</span><span style="background-color: #f5f5f5; color: #0000ff"&gt;function</span><span style="background-color: #f5f5f5; color: #000000"&gt;($scope){
        $scope.str</span><span style="background-color: #f5f5f5; color: #000000"&gt;=</span> <span style="background-color: #f5f5f5; color: #000000"&gt;"</span><span style="background-color: #f5f5f5; color: #000000"&gt;Hello,World!</span><span style="background-color: #f5f5f5; color: #000000"&gt;"</span><span style="background-color: #f5f5f5; color: #000000"&gt;

    }])
</span><span style="color: #0000ff"&gt;</</span><span style="color: #800000"&gt;script</span><span style="color: #0000ff"&gt;></span>

</body>
</html>

　　效果如下：

　　uppercase(大写）

　　　　把数据转化为全部小写。格式： | uppercase

Document {{ str |uppercase }}

<span style="color: #0000ff"&gt;<</span><span style="color: #800000"&gt;script</span><span style="color: #0000ff"&gt;></span>
    <span style="background-color: #f5f5f5; color: #0000ff"&gt;var</span><span style="background-color: #f5f5f5; color: #000000"&gt; myApp </span><span style="background-color: #f5f5f5; color: #000000"&gt;=</span><span style="background-color: #f5f5f5; color: #000000"&gt; angular.module(</span><span style="background-color: #f5f5f5; color: #000000"&gt;'</span><span style="background-color: #f5f5f5; color: #000000"&gt;myApp</span><span style="background-color: #f5f5f5; color: #000000"&gt;'</span><span style="background-color: #f5f5f5; color: #000000"&gt;,World!</span><span style="background-color: #f5f5f5; color: #000000"&gt;"</span><span style="background-color: #f5f5f5; color: #000000"&gt;

    }])
</span><span style="color: #0000ff"&gt;</</span><span style="color: #800000"&gt;script</span><span style="color: #0000ff"&gt;></span>

</body>
</html>

　　效果如下：

　　number(格式化数字)

　　　　格式化数字为一个数字加上千位分割，同时接收一个参数，指定保留几位小数 ?格式： | number ：[-num]

</span><span style="color: #0000ff"&gt;<</span><span style="color: #800000"&gt;br </span><span style="color: #0000ff"&gt;/></span><span style="color: #000000"&gt;
{{ 12345678 | number:3}}

</body>
</html>

　　效果如下：

?　　orderBy(排序)

　　　　将一个数组中的元素进行排序，接收一个参数来指定排序规则，参数可以是一个字符串，表示以该属性名称进行排序。可以是一个函数，定义排序属性。还可以是一个数组，表示依次按数组中的属性值进行排序（若按第一项比较的值相等，再按第二项比较）

Document 　　//按照age属性值排序 {{ arr | orderBy : "age"}}　　//按照函数的返回值排序 {{ arr | orderBy : fn}}　　　//如果age相同，则按name排序 {{ arr | orderBy : ["age","name"]}}

 <span style="color: #0000ff"&gt;<</span><span style="color: #800000"&gt;script</span><span style="color: #0000ff"&gt;></span>
    <span style="background-color: #f5f5f5; color: #0000ff"&gt;var</span><span style="background-color: #f5f5f5; color: #000000"&gt; myApp </span><span style="background-color: #f5f5f5; color: #000000"&gt;=</span><span style="background-color: #f5f5f5; color: #000000"&gt; angular.module(</span><span style="background-color: #f5f5f5; color: #000000"&gt;'</span><span style="background-color: #f5f5f5; color: #000000"&gt;myApp</span><span style="background-color: #f5f5f5; color: #000000"&gt;'</span><span style="background-color: #f5f5f5; color: #000000"&gt;,age: </span><span style="background-color: #f5f5f5; color: #000000"&gt;20</span><span style="background-color: #f5f5f5; color: #000000"&gt;}
        ];
        $scope.fn</span><span style="background-color: #f5f5f5; color: #000000"&gt;=</span><span style="background-color: #f5f5f5; color: #0000ff"&gt;function</span><span style="background-color: #f5f5f5; color: #000000"&gt;(e){
            </span><span style="background-color: #f5f5f5; color: #0000ff"&gt;return</span><span style="background-color: #f5f5f5; color: #000000"&gt; e.name;
        }
    }])
</span><span style="color: #0000ff"&gt;</</span><span style="color: #800000"&gt;script</span><span style="color: #0000ff"&gt;></span>

</body>
</html>

　　效果如下：

　　内置的过滤器就介绍到这里了

　　现在来讲讲自定义的过滤器：filter的自定义方式很简单，使用module的filter方法，返回一个函数，该函数接收输入值，并返回处理后的结果。

　　形式： var app=angular.module("myapp",[]).filter("过滤器名称",?function(){ return function(){....}?}，返回的函数接受2个参数：参数1--表达式的值，参数2--可选

　　demo如下：

　name | reverse    input就是代表name的值。具体实例如下：

Document name:{{name}} reverse:{{name | reverse}}

    myApp.filter(</span><span style="background-color: #f5f5f5; color: #000000"&gt;"</span><span style="background-color: #f5f5f5; color: #000000"&gt;reverse</span><span style="background-color: #f5f5f5; color: #000000"&gt;"</span><span style="background-color: #f5f5f5; color: #000000"&gt;,</span><span style="background-color: #f5f5f5; color: #0000ff"&gt;function</span><span style="background-color: #f5f5f5; color: #000000"&gt;(){
        </span><span style="background-color: #f5f5f5; color: #0000ff"&gt;return</span> <span style="background-color: #f5f5f5; color: #0000ff"&gt;function</span><span style="background-color: #f5f5f5; color: #000000"&gt;(input){
            </span><span style="background-color: #f5f5f5; color: #0000ff"&gt;for</span><span style="background-color: #f5f5f5; color: #000000"&gt;(</span><span style="background-color: #f5f5f5; color: #0000ff"&gt;var</span><span style="background-color: #f5f5f5; color: #000000"&gt; i</span><span style="background-color: #f5f5f5; color: #000000"&gt;=</span><span style="background-color: #f5f5f5; color: #000000"&gt;0</span><span style="background-color: #f5f5f5; color: #000000"&gt;;i</span><span style="background-color: #f5f5f5; color: #000000"&gt;<</span><span style="background-color: #f5f5f5; color: #000000"&gt;input.length;i</span><span style="background-color: #f5f5f5; color: #000000"&gt;++</span><span style="background-color: #f5f5f5; color: #000000"&gt;){
                </span><span style="background-color: #f5f5f5; color: #0000ff"&gt;var</span><span style="background-color: #f5f5f5; color: #000000"&gt; str</span><span style="background-color: #f5f5f5; color: #000000"&gt;=</span><span style="background-color: #f5f5f5; color: #000000"&gt;input.charAt(i)
            }
            </span><span style="background-color: #f5f5f5; color: #0000ff"&gt;return</span><span style="background-color: #f5f5f5; color: #000000"&gt; str;
        }
    })
</span><span style="color: #0000ff"&gt;</</span><span style="color: #800000"&gt;script</span><span style="color: #0000ff"&gt;></span>

</body>
</html>

　　chrome显示如下：

ok，过滤器简单的总结已经差不多了，细节问题以后会慢慢补充！

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!

angularJS----filter

currency（格式化货币单位）

date（格式化日期）

filter（匹配子串）

json（格式化json对象） ?

limitTo（限制数组长度或者字符串长度）

lowercase(小写)

uppercase(大写）

number(格式化数字)

? orderBy(排序)

　　　currency（格式化货币单位）

　　date（格式化日期）

　　filter（匹配子串）

　　json（格式化json对象） ?

　　limitTo（限制数组长度或者字符串长度）

　　lowercase(小写)

　　uppercase(大写）

　　number(格式化数字)

?　　orderBy(排序)