html代碼
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>angularFilter</title>
<link rel="stylesheet" href="../css/bootstrap.min.css" />
<script type="text/javascript" src="../js/angular-1.2.22.js" ></script>
<script src="../js/product.js"></script>
</head>
<body ng-app="myApp" ng-controller="productController">
<div class="container">
<form class="navbar-form pull-left">
<input type="text" class="span2" placeholder="Search" ng-model="search.id">
</form>
<table class="table">
<thead>
<tr>
<!--dropup：true 這個class就顯示，即升序，否則不顯示！-->
<!--注意，這里是ng-class，還有droupup:order中間是沒有任何空格的！！！！-->
<th ng-class="{dropup:order ===''}" ng-click="changeOrder('id')">
產品編號<span class="caret"></span>
</th>
<th ng-class="{dropup:order ===''}" ng-click="changeOrder('name')">
產品名稱<span class="caret"></span>
</th>
<th ng-class="{dropup:order === ''}" ng-click="changeOrder('price')">
產品價格<span class="caret"></span>
</th>
</tr>
</thead>
<tbody>
<!--<tr ng-repeat="product in products | filter:{id:search}">-->
<!--order+orderType注意這兩個字段是有順序的 不能反着寫-->
<tr ng-repeat="product in products | filter:search | orderBy : order+orderType">
<td>
{{product.id}}
</td>
<td>
{{product.name}}
</td>
<td>
{{product.price | currency : "(RMB)"}}
</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
Js代碼
var app = angular.module("myApp",[]);
app.service("products",function(){
return [{
id : 1111,
name : "iphone",
price : 5000
},{
id : 2222,
name : "iphone 4",
price : 1993
},{
id : 1091,
name : "iphone 5",
price : 2893
},{
id : 1792,
name : "iphone 6",
price : 4500
}];
});
app.controller("productController",function($scope,products){
$scope.products = products;//Angular自動注入
//排序條件
$scope.order = "-";//默認是升序,-表示降序
$scope.orderType = "id" ;//以id來排序,不能直接在頁面以id這個字段排序
$scope.changeOrder = function(type){
$scope.orderType = type ;
//如果本來是降序，就變為升序，如果是升序，就變為降序
if($scope.order===''){
$scope.order = '-';
}else{
$scope.order = '';
}
}
});
注意：注意標紅色的代碼，只需過濾器filter:search和input搜索框綁定的ng-model的search.XX就可以,XX表示products（上面綠色部分）的某一屬性，即根據該屬性來進行過濾！！！