AngularJS实现产品列表(页面搜索,排序)

标签属性介绍

ng-class="{className:expression}" 如果expression为true,则使用className这个class。

ng-click="functionName(pram)" 这跟onclick是一样的,点击就执行functionName(pram)。

ng-repeat="i in set | filter:filterExpression or filterFunction| orderBy:order+orderType" 循环set里的元素,有过滤条件和排序条件。

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <link href="http://cdn.bootcss.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet">
    <style type="text/css">
    body {
        font-family: "Arial", "Microsoft YaHei", "黑体", "宋体", sans-serif;
    }
    
    .orderColor {
        color: red;
    }
    </style>
</head>

<body ng-app="product">
    <div class="container" ng-controller="firstController">
        <nav class="navbar navbar-inverse">
            <div class="container-fluid">
                <!-- Collect the nav links, forms, and other content for toggling -->
                <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" class="form-control" placeholder="查找内容" ng-model="search">
                        </div>
                    </form>
                </div>
            </div>
        </nav>
        <table class="table">
            <thead>
                <tr>
                    <th ng-class="{dropup:order===''}" ng-click="changeOrder('id')">产品名称<span class="caret" ng-class="{orderColor:orderType==='id'}"></span></th>
                    <th ng-class="{dropup:order===''}" ng-click="changeOrder('name')">产品编号<span class="caret" ng-class="{orderColor:orderType==='name'}"></span></th>
                    <th ng-class="{dropup:order===''}" ng-click="changeOrder('price')">产品价格<span class="caret" ng-class="{orderColor:orderType==='price'}"></span></th>
                </tr>
            </thead>
            <tbody>
                <tr ng-repeat="item in productData | filter:search | orderBy:order+orderType">
                    <td>{{item.id}}</td>
                    <td>{{item.name}}</td>
                    <td>{{item.price | currency:'RMB '}}</td>
                </tr>
            </tbody>
        </table>
    </div>
    <script src="http://cdn.bootcss.com/angular.js/1.4.0-rc.2/angular.min.js"></script>
    <script type="text/javascript">
    angular.module('product', [])
        .service('productData', function() {
            return [{
                id: 1098,
                name: 'iPhone',
                price: 5288
            }, {
                id: 5420,
                name: 'iPad',
                price: 4388
            }, {
                id: 2067,
                name: 'Mac Book',
                price: 10888
            }, {
                id: 5991,
                name: 'Surface',
                price: 9288
            }];
        })
        .controller('firstController', 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 = '';
                }
            }
        });
    </script>
</body>

</html>


你可能感兴趣的:(filter,标签,Angular,产品,expression)