示例：产品列表

效果：

index.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css"/>
    <style>
        .orderColor{
            color:red;
        }
    </style>
</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 navbar-left" role="search">
                    <div class="form-group">
                        <input type="text" ng-model="search.id" class="form-control" placeholder="Search">
                    </div>
                </form>
            </div>
        </nav>
        <table class="table">
            <thead>
            <tr>
                <th ng-click="changeOrder('id')" ng-class="{dropup:order === ''}">
                    产品编号
                    <span ng-class="{orderColor:orderType === 'id'}" class="caret"></span>
                </th>
                <th ng-click="changeOrder('name')" ng-class="{dropup:order === ''}">
                    产品名称
                    <span ng-class="{orderColor:orderType === 'name'}" class="caret"></span>
                </th>
                <th ng-click="changeOrder('price')" ng-class="{dropup:order === ''}">
                    产品价钱
                    <span ng-class="{orderColor:orderType === 'price'}" class="caret"></span>
                </th>
            </tr>
            </thead>
            <tbody>
            <!--filter:{id:search}-->
            <tr ng-repeat="product in productData | filter:search | orderBy:order + orderType">
                <td>
                    {{product.id}}
                </td>
                <td>
                    {{product.name}}
                </td>
                <td>
                    {{product.price | currency : '(RMB)'}}
                </td>
            </tr>
            </tbody>
        </table>
    </div>


</div>

<script src="//cdn.bootcss.com/angular.js/1.4.8/angular.js"></script>
<script type="text/javascript" src="app/index.js"></script>


</body>
</html>

app/index.js

    angular.module('product', [])

    .service('productData', function () {
        return [
            {
                id:3333,
                name:'iphone',
                price : 5400
            },
            {
                id:885,
                name:'ipad',
                price : 3420
            },
            {
                id:980,
                name:'imac',
                price : 15400
            },
            {
                id:1212,
                name:'ipad air',
                price : 2340
            },
            {
                id:3424,
                name:'ipad mini',
                price : 2200
            }
        ];
    })

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

        $scope.orderType = 'id';

        $scope.order = '-';

        $scope.changeOrder = function(type){

            $scope.orderType = type;

            if($scope.order === ''){
                $scope.order = '-';
            }else{
                $scope.order = '';
            }
        }
    });
Previousfilter、orderBy、jsonNext自定义过滤器

Last updated

Was this helpful?