zoukankan      html  css  js  c++  java
  • angularjs自带过滤器

    filter:

      filter过滤器第一个参数若是对象:

        <ul>
            <li ng-repeat="friend in friends | filter:{'name':'John'}"><!--对象指定属性查找-->
                <p>{{friend.name}}  {{friend.phone}}</p>
            </li>
        </ul>
             $scope.friends = [
                    {name: 'John',   phone: '555-1212',  age: 10},
                    {name: 'Mary',   phone: '555-9876',  age: 19},
                    {name: 'Mike',   phone: '555-4321',  age: 21},
                    {name: 'Adam',   phone: '555-5678',  age: 35},
                    {name: 'Adam',   phone: '555-5678  John',  age: 35},
                    {name: 'Julie',  phone: '555-8765',  age: 29}
                ];

    结果: 

    如果我们希望对全部属性进行对比,可以将$当作键名

       <ul>
            <li ng-repeat="friend in friends | filter:{'$':'John'}"><!--对象所有属性值查找 filter:{'$':'John'} 等同于filter:'John'-->
                <p>{{friend.name}}  {{friend.phone}}</p>
            </li>
        </ul>

    结果: 

    orderBy:

      第二个参数有值的情况:

          <table class="friends">
                <tr>
                    <th>Name</th>
                    <th>Phone Number</th>
                    <th>Age</th>
                </tr>
                <tr ng-repeat="friend in friends | orderBy:'age':true"><!--根据age降序排列-->
                    <td>{{friend.name}}</td>
                    <td>{{friend.phone}}</td>
                    <td>{{friend.age}}</td>
                </tr>
            </table>

      第二个参数为true时,是根据age降序排列

    结果:

    若为false,则为升序排列:

          <table class="friends">
                <tr>
                    <th>Name</th>
                    <th>Phone Number</th>
                    <th>Age</th>
                </tr>
                <tr ng-repeat="friend in friends | orderBy:'age':false"><!--根据age升序排列-->
                    <td>{{friend.name}}</td>
                    <td>{{friend.phone}}</td>
                    <td>{{friend.age}}</td>
                </tr>
            </table>

     结果:

    filter与orderBy共用:

            <input type="text" ng-model="age"/>
            <table class="friends">
                <tr>
                    <th>Name</th>
                    <th>Phone Number</th>
                    <th>Age</th>
                </tr>
                <tr ng-repeat="friend in friends | filter: age | orderBy:'age'"><!--fiter与orderBy共用-->
                    <td>{{friend.name}}</td>
                    <td>{{friend.phone}}</td>
                    <td>{{friend.age}}</td>
                </tr>
            </table>

    结果:

    JSON:

    json过滤器可以将一个json或javascript对象转换成字符串

    <p>{{ {name:'aa',age:23} | json }}</p>

    输出结果:

    { "name": "aa", "age": 23 } 

     Number:

        <input type="text" ng-model="fraction"/>
        <p>默认为3位 :{{fraction | number}}</p><!--12,345.679 四舍五入-->
        <p>fractionSize为5位 :{{fraction | number:5}}</p><!--fractionSize为5位 :12,345.67890  自动补零-->
        <p>fractionSize为0位 :{{fraction | number:0}}</p><!--fractionSize为0位 :12,346-->
        <p>负数fractionSize为4位 :{{-fraction | number:4}}</p><!--fractionSize为4位 :-12,345.6789-->
        <p>string类型测试 :{{str | number:4}}</p><!--string类型测试 :3,455.0000-->
        <p>空字符串类型测试 :{{'' | number}}</p><!--空字符串类型测试 :0-->
        <p>非数字字符串类型测试 :{{'test' | number}}</p><!--空字符串类型测试 :空字符串-->

    注意:如果传入一个非数字字符,会返回空字符串。

    $scope.str = '3455';

    currency:

        <input type="text" ng-model="price"/>
        <p>default currency symbol ($):{{price | currency}}</p><!--default currency symbol ($): $12,345.68-->
        <p>custom currency identifier (USD$):{{price | currency:'USD$'}}</p><!--custom currency identifier (USD$): USD$12,345.68-->
        <p>fractions为2位:{{price | currency:'RMB':2}}</p><!--RMB12,345.68-->
        <p>no fractions(0):{{price | currency:'RMB':0}}</p><!--RMB12,346-->
        <p>string类型测试:{{str | currency:'RMB':2}}</p><!--string类型测试:RMB3,455.00-->
    $scope.str = '3455';

     limitTo:

        <p><strong>数据类型是数组:</strong></p>
        <p>从开始位置数组限制:{{numbers | limitTo:5}}</p><!--从开始位置数组限制:[1,2,3,4,5]-->
        <p>从末尾位置数组限制:{{numbers | limitTo:-5}}</p><!--从末尾位置数组限制:[5,6,7,8,9]-->
        <p>限制长度大于数组的长度:{{numbers | limitTo:15}}</p><!--限制长度大于数组的长度:[1,2,3,4,5,6,7,8,9]  整个数组会被输出-->
        <p>第二个参数--从哪个位置开始截取:{{numbers | limitTo:3:4}}</p><!--第二个参数--从哪个位置开始截取:[5,6,7]  从索引为4的位置开始截取,包括此位置-->
        <p><strong>数据类型是字符串:</strong></p>
        <p>从开始位置字符串限制:{{letters | limitTo:5}}</p><!--从开始位置字符串限制:abcde-->
        <p>从末尾位置字符串限制:{{letters | limitTo:-5}}</p><!--从末尾位置字符串限制:efghi-->
        <p>限制长度大于字符串的长度:{{letters | limitTo:15}}</p><!--限制长度大于字符串的长度:abcdefghi  整个字符串会被输出-->
        <p>第二个参数--从哪个位置开始截取:{{letters | limitTo:3:4}}</p><!--第二个参数--从哪个位置开始截取:efg  从索引为4的位置开始截取,包括此位置-->
        <p><strong>数据类型是数字类型:</strong></p>
        <p>从开始位置数字限制:{{longNumber | limitTo:5}}</p><!--从开始位置数字限制:23454-->
        <p>从末尾位置数字限制:{{longNumber | limitTo:-5}}</p><!--从末尾位置数字限制:32342-->
        <p>限制长度大于数字的长度:{{longNumber | limitTo:15}}</p><!--限制长度大于数字的长度:2345432342  整个数字会被输出-->
        <p>第二个参数--从哪个位置开始截取:{{longNumber | limitTo:3:4}}</p><!--第二个参数--从哪个位置开始截取:432  从索引为4的位置开始截取,包括此位置-->

    注意:如果传入的长度值大于被操作的数组或字符串的长度,那么整个字符串或数组或数字都会被返回。

        $scope.numbers = [1,2,3,4,5,6,7,8,9];
        $scope.letters = "abcdefghi";
        $scope.longNumber = 2345432342;

     http://www.cnblogs.com/wolf-sun/p/4752004.html

  • 相关阅读:
    关于扩展欧几里得算法___基础,基础中的基础
    bzoj 2152聪聪可可
    poj1741 树上的点分治
    POJ1201 区间
    codevs 2756树上的路径
    zoj1260 king
    栈与队列应用:迷宫问题(DFS非最短路径)
    估值为一亿的AI核心代码
    栈与队列应用:计算前缀表达式的值
    栈与队列:循环队列算法+可执行代码
  • 原文地址:https://www.cnblogs.com/loveamyforever/p/6094723.html
Copyright © 2011-2022 走看看