AngularJS过滤排序思路

最新推荐文章于 2019-11-07 18:48:51 发布

转载最新推荐文章于 2019-11-07 18:48:51 发布 · 113 阅读

本文详细介绍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>