AngularJS之过滤器篇

过滤器用来格式化需要展示给用户的数据。AngularJS有很多实用的内置过滤器,同时也提供了方便的途径可以自己定义过滤器。过滤器可以使用一个管道字符(|)添加到表达式和指令中。
一、uppercase 过滤器将字符串格式化为大写,lowercase 过滤器将字符串格式化为小写:

 <div>
        <h3>字符串大小写转换过滤器h3>
        <div ng-bind="name">div>
        <div ng-bind="name | uppercase">div>
        <div ng-bind="name | lowercase">div>
    div>

二、.currecy过滤器可以将一个数值格式化为货币格式。用{{ 50| currecy }}来将50转化成货币格式。currecy过滤器允许我们自己设置货币符号或者设置保留小数的位数。

   <div>
        <p>
            对于要展示的货币数据【原始数据就是数字】
            按照指定的货币格式进行输出
        p>
        货币过滤器输出:<span ng-bind="price | currency">span><br/>
        货币过滤器输出:<span ng-bind="price | currency:'人命币¥'">span><br/>
        货币过滤器输出:<span ng-bind="price | currency:'¥':3">span><br/>
    div>

三、date过滤器可以将日期格式化成需要的格式。通常情况下,需要按照用户的要求进行输出,这时候就会附带参数 y/M/d/h/m/s/E 年/月/日/时/分/秒/星期

        <div>
            <span ng-bind="date | date:'yyyy年MM月dd日 hh:mm:ss'">span>
            <span ng-bind="date | date:'yyyy年MM月dd日'">span>
            <span ng-bind="date | date:'hh:mm:ss'">span>
        div>

四、 orderBy过滤器可以用表达式对指定的数组进行排序。

 <div>
        <h3>排序输出h3>
        排序关键词:<input type="text" ng-model="keyword">
        排序顺序:<input type="checkbox" ng-model="sort">倒序
        <br />
        <ul>
            <li ng-repeat="u in users | orderBy:keyword:sort">
                <span ng-bind="u.userID">span>
                <span ng-bind="u.username">span>
                <span ng-bind="u.nickname">span>
            li>
        ul>
    div>

五、limitTo过滤器会根据传入的参数生成一个新的数组或字符串,可以通过参数定义截取的长度和从哪里开始截取的位置

   <div>
        <h3>长度限制过滤器h3>
        长度:<input type="text" ng-model="length"><br />
        位置:<input type="text" ng-model="index">
        <br />
        <ul>
            <li ng-repeat="u in users | limitTo:length:index">
                <span ng-bind="u.userID">span>
                <span ng-bind="u.username">span>
                <span ng-bind="u.nickname">span>
            li>
        ul>
    div>

六、json过滤器把数据中的对象,转换成JSON字符串的格式输出展示到页面上

    <div>
        <h3>JSON过滤器h3>
        <span ng-bind="users|json">span>
    div>

七、 filter过滤器可以从给定数组中选择一个子集,并将其生成一个新数组返回。这个过滤器通常用来过滤需要进行展示的元素。 这个过滤器的第一个参数可以是字符串、对象或是一个用来从数组中选择元素的函数。

<div>
        <h3>过滤输出h3>
        关键词:<input type="text" ng-model="keyword">
        <br />
        <ul>
            <li ng-repeat="u in users | filter:keyword">
                <span ng-bind="u.userID">span>
                <span ng-bind="u.username">span>
                <span ng-bind="u.nickname">span>
            li>
        ul>
    div>

八、自定义过滤器


<html ng-app="myApp">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <script src="js/lib/AngularJS/angular.min.js">script>
head>
<body>
<div ng-controller="myCtrl">
    <div ng-bind="name">div>
    <div ng-bind="name | myfilter">div>
div>
<script>
    var app = angular.module("myApp", []);
    /*app.filter(name, fn):用于定义一个自定义过滤器
     * name:过滤器名称
     * fn:过滤器处理函数
     * */
    app.filter("myfilter", function() {
        /*
         * 过滤器中,直接return function(value) {}
         * 通过闭包函数来实现数据处理,固定语法结构!
         * value参数:第一个参数,用于接收要处理的数据:数据就是过滤器管道符前面变量中的数据
         */
        return function(value) {/*闭包函数中的value就是过滤器接收到的数据|就是准备过滤的数据*/
            /*
             * 这一部分主要是用来进行数据处理的
             */
            value = value.toUpperCase();
            /* 过滤器中数据处理完成,一定要返回输出*/
            return value;
        }
    });
    app.controller("myCtrl", function($scope) {
        $scope.name = "jerry";
    });
script>
body>
html>

你可能感兴趣的:(AngularJS之过滤器篇)