Angular JS 过滤器(Filter)

从学习Angular JS期间，一直觉得这是一个非常强大的框架。于是用Angular JS过滤器知识做了一个产品列表展示的功能。
功能点包括：列表展示，列排序（升序和降序），搜索（可对列表中的每个值进行模糊匹配或者指定字段的值模糊匹配）。
源码如下（要运行源码请先保证有angular.min.js和bootstrap.min.css 这两个文件都可以在网上下载）：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="../../vendor/bootstrap3/css/bootstrap.min.css">

    <title>Title</title>
    <script src="../../vendor/angular/angular.min.js"></script>

    <style>
        .orderColor {
            color : #ff1822;
        }

    </style>

    <script>

        var myApp = angular.module('product',[])
            .service('productData',function () {
                return [
                    {
                        id:100,
                        name:'iphone5S',
                        price:3800
                    },{
                        id:200,
                        name:'iPad Air',
                        price:6500
                    },
                    {
                        id:300,
                        name:'iMac',
                        price:6800
                    },{
                        id:400,
                        name:'iphone6 plus',
                        price:5500
                    },
                    {
                        id:500,
                        name:'iphone7',
                        price:5400
                    }


                ]
            })

            .controller('productController',function ($scope,productData) {
                $scope.productData = productData;

                $scope.orderName = 'id';
                $scope.orderSymbol = '-';

                $scope.changeOrder = function (type) {
                    $scope.orderName = type;
                    if($scope.orderSymbol===''){
                        $scope.orderSymbol = '-';
                    }else{
                        $scope.orderSymbol = '';
                    }
                }
            });


    </script>


</head>
<body>
    <div ng-app="product">
        <div class="container" ng-controller="productController">
            <nav class="navbar navbar-default" role="navigation">
                <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                    <form class="navbar-form" role="search">
                        <div class="form-group">
                          <!--  <input type="text" ng-model="search" class="form-control" placeholder="Search">-->
                            <!--只对name进行搜索-->
                            <input type="text" ng-model="search.name" class="form-control" placeholder="Search">
                        </div>
                    </form>
                </div>
            </nav>

            <table class="table">
                <thead>
                    <tr>
                        <!--dropup:升序使用的class-->
                        <th ng-click="changeOrder('id')" ng-class="{dropup:orderSymbol ===''}">
                            产品编号
                            <span ng-class="{orderColor:orderName==='id'}" class="caret"></span>
                        </th>
                        <th ng-click="changeOrder('name')" ng-class="{dropup:orderSymbol ===''}">
                            产品名称
                            <span ng-class="{orderColor:orderName==='name'}" class="caret"></span>
                        </th>
                        <th ng-click="changeOrder('price')" ng-class="{dropup:orderSymbol ===''}">
                            产品单价
                            <span ng-class="{orderColor:orderName==='price'}" class="caret"></span>
                        </th>

                    </tr>

                </thead>
                <tbody >
                <!--对所有的内容的值进行搜索匹配-->
                    <!--<tr ng-repeat="pro in productData |filter:search">  -->
                <!--只对id进行搜索（搜索条件相当于一个Map）-->
                   <!-- <tr ng-repeat="pro in productData |filter:{id:search}">-->
                    <tr ng-repeat="pro in productData |filter:search |orderBy:orderSymbol+orderName">
                        <td>{{pro.id}}</td>
                        <td>{{pro.name}}</td>
                        <td>{{pro.price | currency:'¥'}}</td>
                    </tr>
                </tbody>
            </table>
        </div>

    </div>
</body>
</html>

效果如下：

功能亮点之一：可以灵活的对任何字段排序，而不用请求后台。

另外，我开发的时候用的工具是WebStorm，下载地址：https://www.jetbrains.com/webstorm/download/#section=windows

工具亮点之一：

Angular JS 过滤器(Filter)

Angular JS 过滤器(Filter)

相关推荐