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所代表的搜索結果為空時，顯示該區域信息。

 

以上只是局限在客戶端的過濾和排序，如果和服務端結合起來，又另當別論了。