你的位置:首页 > Java教程

[Java教程]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  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所代表的搜索结果为空时,显示该区域信息。