AngularJS过滤排序思路
本篇主要整理使用AngularJS进行过滤排序的思路。
在controller中,$scope的persons字段存储数组。
$scope.persons = [ { "name": "aa", "email": "aaemail", "birthdate": "2015-03-23T18:00:37-07:00", "phonenumber": "aaphonenumber", "address": "aaaddress", "city": "aacity", "country": "China" }, ... ];
过滤
用2个文本框，一个输入和name有关，一个输入和email有关，如何实现过滤？
过滤内置函数filter接受对象。
→ 在controller中定义个对象
$scope.search = {};
→ filter条件为search对象
ng-repeat="person in persons | filter: search"
→ 搜索文本框和search.name或search.email绑定
<input type="text" ng-model="search.name" type="text" />
<input type="text" ng-model="search.email" type="text" />
用1个文本框，对任意属性搜索，如何实现？
过滤内置函数filter接受对象。
→ 在controller中定义个对象
$scope.search = {};
→ filter条件为search对象
ng-repeat="person in persons | filter: search"
→ 搜索文本框和search.$绑定
ng-model="search.$"
search.$表示可以是集合对象的任意属性，只要输入的符合集合对象任意一个属性值，filter就返回true。
用1个文本框，定义搜索的属性，比如可以搜索name, 也可以搜索name加email等等，如何实现？
过滤内置函数filter接受返回bool类型的函数。
→ filter接受函数
ng-repeat="person in persons | filter: sensitiveSearch"
注意，这里sensitiveSearch函数接收person实参。
→ 在controller中定义sensitiveSearch方法
$scope.search="";
$scope.sensitiveSearch = function(person){
if($scope.search){
return person.name.indexOf($scope.search) == 0 ||
person.email.indexOf($scope.search) == 0;
}
return true;
};
→ 搜索框绑定search属性
<input type="text" ng-model="search" />
排序
隐式排序，没有界面交互
内置排序函数orderBy接受某个属性。
ng-repeat="person in persons | filter: sensitiveSearch | orderBy:'email'"
ng-repeat="person in persons | filter: sensitiveSearch | orderBy:'-email'"
email表示升序排列，-emial相反。
显式排序，有界面交互，在界面上选择排序字段以及升序和降序，通过select选择排序字段
→ controller的$scope中
$scope.order = "email";
→ orderBy使用order字段
ng-repeat="person in persons | filter: sensitiveSearch | orderBy:order"
→ 界面select与order字段绑定
<select class="form-control" ng-model="order">
<option value="name">Name(asc)</option>
<option value="-name">Name(desc</option>
<option value="email">Email(asc)</option>
<option value="-email">Email(desc</option>
</select>
显式排序，有界面交互，在界面字段旁加按钮，选择升序或降序
→ controller的$scope中
$scope.order = "email";
→ orderBy使用order字段
ng-repeat="person in persons | filter: sensitiveSearch | orderBy:order"
→ 界面
在name字段旁加升序降序按钮：
ng-click="order = 'name'"
ng-click="order = '-name'"
在email字段旁加升序降序按钮：
ng-click="order = 'email'"
ng-click="order = '-email'"
点击行事件
让当前行变换背景色，并把当前行的详细信息在某处显示出来。
→ 给当前行添加点击事件
<tr ng-repeat="person in persons | filter: sensitiveSearch | orderBy:order" ng-style="{'background-color': person.email == selectedPerson.email ? 'lightgray':''}" ng-click="selectPerson(person)">
ng-style接受一个对象，设置样式。
→ 在controller中定义selectPerson
$scope.selectedPerson = null; $scope.selectPerson = function (person) { $scope.selectedPerson = person; };
→ 在界面的某处显示该行的详细信息
{{selectedPerson.name
{{selectedPerson.email}}
{{selectedPerson.birthdate | date: "longDate"}}
{{selectedPerson.address}}
{{selectedPerson.city}}
{{selectedPerson.country}}
搜索不到结果的处理方式
当搜索框内输入一个值，有可能是没有匹配结果。如何在没有搜索结果的时候，界面给到一个提示？
→ 把过滤排序后的结果赋值一个变量
ng-repeat="person in filteredPersons = (persons | filter: sensitiveSearch | orderBy:order)"
→ 界面某处
<tr ng-show="filteredPersons.length == 0"> <td colspan="4"> <div class="alert alert-info"> <p class="text-center"> No results found for search term '{{search}}' </p> </div> </td> </tr>
当filteredPersons所代表的搜索结果为空时，显示该区域信息。
以上只是局限在客户端的过滤和排序，如果和服务端结合起来，又另当别论了。
