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"  },  ...];

过滤内置函数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" />过滤内置函数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="";→ 搜索框绑定search属性<input type="text" ng-model="search" />

 

排序

 

隐式排序，没有界面交互内置排序函数orderBy接受某个属性。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">显式排序，有界面交互，在界面字段旁加按钮，选择升序或降序→ controller的$scope中$scope.order = "email";→ orderBy使用order字段ng-repeat="person in persons | filter: sensitiveSearch | orderBy:order"→ 界面在name字段旁加升序降序按钮：在email字段旁加升序降序按钮：→ 给当前行添加点击事件

 

<tr ng-repeat="person in persons | filter: sensitiveSearch | orderBy:order"      ng-style="{'background-color': person.email == selectedPerson.email ? 'lightgray':''}"      ng-click="selectPerson(person)">

{{selectedPerson.name当搜索框内输入一个值，有可能是没有匹配结果。如何在没有搜索结果的时候，界面给到一个提示？

 

→ 把过滤排序后的结果赋值一个变量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>

 

海外公司注册、海外银行开户、跨境平台代入驻、VAT、EPR等知识和在线办理：https://www.xlkjsw.com

原标题：AngularJS过滤排序思路

关键词：JS