AngularJS實現產品列表（頁面搜尋，排序）

最後更新：2015-06-29 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

標籤：expression 產品 filter 標籤 angular

標籤屬性介紹

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>

AngularJS實現產品列表（頁面搜尋，排序）

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More