2017年2月8日 星期三

filter (angularJS 三)

官方API，參考這裡

※lowercase、uppercase、currency、orderBy

<html>
    <script type="text/javascript" src="angular.js"></script>
    
    <body ng-app='xxx'>
        <div ng-controller='ooo'>
            <input ng-model='p3'><br />
            lowercase:
            <p>{{p3 | lowercase}}</p>
            ------------------------------ <br />
            uppercase:
            <p>{{p4 | uppercase}}</p>
            ------------------------------ <br />
            currency:
            <p>{{p1 * 2 | currency}}</p>
            ------------------------------ <br />
            orderBy:
            <p ng-repeat='x in p6 | orderBy:"pp1"'>
                {{x.pp1 + '=' + x.pp2}} <br />
                {{x.pp1 | uppercase}} = {{x.pp2 | currency}} <br />
                {{(x.pp1 | uppercase) + '=' + (x.pp2 | currency)}}
            </p>
            ------------------------------ <br />
            filter:
            <p ng-repeat='x in p6 | filter:"B" | orderBy:"pp1"'>
                {{x.pp1 + '=' + x.pp2}} <br />
                {{x.pp1 | uppercase}} = {{x.pp2 | currency}} <br />
                {{(x.pp1 | uppercase) + '=' + (x.pp2 | currency)}}
            </p>
            ------------------------------ <br />
            自定排序：<br />
            <table border="1">
                <th ng-dblclick="orderByXX('pp1')">Fruit</th>
                <th ng-dblclick="orderByXX('pp2')">Price</th>
                <tr ng-repeat="x in p6 | orderBy:orderBySelf">
                    <td>{{x.pp1}}</td>
                    <td>{{x.pp2}}</td>
                </tr>
            </table>
            ------------------------------ <br />
            自定過濾：<br />
            <ul>
                <li ng-repeat="x in p6">
                    {{x | filterSelf}}
                </li>
            </ul>
        </div>
    </body>
</html>
    
<script>
    var app = angular.module('xxx', []);
    app.controller('ooo', ($scope) => {
        $scope.p1 = 123456789;
        $scope.p2 = 'ddD';
        $scope.p3 = 'Bbb';
        $scope.p4 = 'aAA';
        
        $scope.p5 = () => {
            return $scope.p1 + $scope.p4;
        };
    
        $scope.p6 = [
            {pp1:'strawberry', pp2:'90'},
            {pp1:'apple', pp2:'67'},
            {pp1:'banana', pp2:'23'},
            {pp1:'blueberry', pp2:'90'},
            {pp1:'pineapple', pp2:'50'}
        ];
    
        $scope.orderByXX = function(x) {
            $scope.orderBySelf = x;
        }
    });
    
    app.filter('filterSelf', () => {
        return (x) => {
            return x.pp1.toUpperCase();
        };
    });
</script>

※orderBy可用倒序，只要在最後面加上「:"reverse"」，如：
<p ng-repeat='x in p6 | orderBy:"pp1":"reverse"'>

※filter:'b'，裡面的字是不分大小寫的

※自定排序配合事件，以上例是在 th 標籤快按滑鼠左鍵兩下可排序

※結果：

lowercase:
bbb
------------------------------
uppercase:
AAA
------------------------------
currency:
$246,913,578.00
------------------------------
orderBy:
apple=67
APPLE = $67.00
APPLE=$67.00
banana=23
BANANA = $23.00
BANANA=$23.00
blueberry=90
BLUEBERRY = $90.00
BLUEBERRY=$90.00
pineapple=50
PINEAPPLE = $50.00
PINEAPPLE=$50.00
strawberry=90
STRAWBERRY = $90.00
STRAWBERRY=$90.00
------------------------------
filter:
banana=23
BANANA = $23.00
BANANA=$23.00
blueberry=90
BLUEBERRY = $90.00
BLUEBERRY=$90.00
strawberry=90
STRAWBERRY = $90.00
STRAWBERRY=$90.00
------------------------------
自定排序：
FruitPrice
strawberry90
apple67
banana23
blueberry90
pineapple50
------------------------------
自定過濾：
  • STRAWBERRY
  • APPLE
  • BANANA
  • BLUEBERRY
  • PINEAPPLE



※date、number、json

<html>
    <script type="text/javascript" src="angular.js"></script>
    
    <body ng-app='xxx'>
        <div ng-controller='ooo'>
            <input ng-model='p1'><br />
            date:
            <p>{{p1 | date}}</p>
            ------------------------------ <br />
            number:
            <p>{{p2 | number}}</p>
            <p>{{p2 | number:0}}</p>
            <p>{{p2 | number:2}}</p>
            <p>{{p2 | number:-1}}</p>
            ------------------------------ <br />
            json:
            <p>{{ p3 | json }}</p>
            <pre>{{ p3 | json }}</pre>
            <pre>{{ p3 | json:4 }}</pre>
        </div>
    </body>
</html>
    
<script>
    var app = angular.module('xxx', []);
    app.controller('ooo', ($scope) => {
        $scope.p1 = '2000-10-01';
        $scope.p2 = 1234.5678;
        $scope.p3 = [
            {pp1:'strawberry', pp2:'90'},
            {pp1:'apple', pp2:'67'},
            {pp1:'banana', pp2:'23'}
        ];
        $scope.p4 = {'a1':5, 'a2':10, 'a3':500};
    });
</script>

※json:4，這個數字是排版的空格有幾個的意思，但只有 pre 標籤有用

※date格式太多了，請參考上面的官網API連結

※結果：

date:
Oct 1, 2000
------------------------------
number:
1,234.568
1,235
1,234.57
1,230
------------------------------
json:
[ { "pp1": "strawberry", "pp2": "90" }, { "pp1": "apple", "pp2": "67" }, { "pp1": "banana", "pp2": "23" } ]
[
  {
    "pp1": "strawberry",
    "pp2": "90"
  },
  {
    "pp1": "apple",
    "pp2": "67"
  },
  {
    "pp1": "banana",
    "pp2": "23"
  }
]
[
    {
        "pp1": "strawberry",
        "pp2": "90"
    },
    {
        "pp1": "apple",
        "pp2": "67"
    },
    {
        "pp1": "banana",
        "pp2": "23"
    }
]




※limitTo

<html>
    <script type="text/javascript" src="angular.js"></script>
    
    <body ng-app='xxx'>
        <div ng-controller='ooo'>
            <p>{{ numArr | limitTo:4 }}</p>
            <p>{{ str | limitTo:7}}</p>
            <p>{{ num | limitTo:3}}</p>
            ------------------------------
            <p>{{ numArr | limitTo:-1 }}</p>
            <p>{{ str | limitTo:-1}}</p>
            <p>{{ num | limitTo:-1}}</p>
        </div>
    </body>
</html>
    
<script>
    var app = angular.module('xxx', []);
    app.controller('ooo', ($scope) => {
        $scope.numArr = [1,2,3,4,5,6,7,8,9];
        $scope.str = "abcdefghi";
        $scope.num = 9876543210;
    });
</script>

※不管是陣列、字串、數字都有效；負的從後面開始取

※結果：
[1,2,3,4]
abcdefg
987
------------------------------
[9]
i
0
張貼者： 於
標籤：

沒有留言:

張貼留言

訂閱： 張貼留言 (Atom)