angular過濾器實(shí)現(xiàn)排序功能
更新時(shí)間：2017年06月27日 08:39:08 作者：Code_User
這篇文章主要為大家詳細(xì)介紹了angular過濾器實(shí)現(xiàn)排序功能，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
本文實(shí)例為大家分享了angular過濾器排序的具體代碼，供大家參考，具體內(nèi)容如下
首先定義一個(gè)json文件：
然后寫HTML文件：
<div id="box">
<!--第一個(gè)下拉框-->
<select ng-model="a">
<option value="age">按照年齡排序</option>
<option value="code">按照編碼排序</option>
<option value="name">按照姓名排序</option>
</select>
<!--升序還是降序-->
<select ng-model="b">
<option value="">升序</option>
<option value="-">降序</option>
</select>
<!--一個(gè)搜索框-->
<input type="text" placeholder="請(qǐng)輸入要搜索的內(nèi)容" ng-model="c"/>
</div>
<!--渲染的數(shù)據(jù)-->
<div id="wrap">
<table>
<tr>
<th>編碼</th>
<th>姓名</th>
<th>年齡</th>
</tr>
<tr ng-repeat="item in data|filter:c|orderBy:b+a">
<td>{{item.code}}</td>
<td>{{item.name}}</td>
<td>{{item.age}}</td>
</tr>
</table>
</div>
angular：
<script>
var app = angular.module("mk",[]);
app.controller("test",function($scope,$http){
$http.get('json/index.json').success(function(data){
$scope.data = eval(data);
$scope.a = "code";
})
})
</script>
在這種運(yùn)用到的過濾器有filter 、orderBy
這樣就完成了一個(gè)簡單的排序，希望能幫到大家！
以上就是本文的全部內(nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
Angular依賴注入系統(tǒng)里Injection token PLATFORM_ID使用場景詳解
這篇文章主要為大家介紹了Angular依賴注入系統(tǒng)里Injection token PLATFORM_ID使用場景詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-11-11
AngularJS實(shí)現(xiàn)tab選項(xiàng)卡的方法詳解
這篇文章主要介紹了AngularJS實(shí)現(xiàn)tab選項(xiàng)卡的方法,結(jié)合實(shí)例形式較為詳細(xì)的分析了AngularJS實(shí)現(xiàn)tab選項(xiàng)卡的原理、實(shí)現(xiàn)技巧與相關(guān)注意事項(xiàng),需要的朋友可以參考下2017-07-07
angular實(shí)現(xiàn)IM聊天圖片發(fā)送實(shí)例
本篇文章主要介紹了angular實(shí)現(xiàn)IM聊天圖片發(fā)送實(shí)例，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-05-05
這篇文章主要介紹了淺談Angular 的變化檢測的方法,小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-03-03
AngularJS入門教程之與服務(wù)器(Ajax)交互操作示例【附完整demo源碼下載】
這篇文章主要介紹了AngularJS與服務(wù)器Ajax交互操作的方法,可實(shí)現(xiàn)post傳輸數(shù)據(jù)的功能,并附帶完整的demo源碼供讀者下載參考,源碼中還包含了前面章節(jié)的示例文件,需要的朋友可以參考下2016-11-11
Angularjs中數(shù)據(jù)綁定的實(shí)例詳解
這篇文章主要介紹了Angularjs中數(shù)據(jù)綁定的實(shí)例詳解的相關(guān)資料,這里提供簡單實(shí)例，大家可以參考下，希望通過本文可以掌握這部分內(nèi)容，需要的朋友可以參考下2017-08-08
這篇文章主要為大家詳細(xì)介紹了AngularJS表單驗(yàn)證功能，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-10-10
使用Angular.js開發(fā)的注意事項(xiàng)
這篇文章主要記錄了一些在學(xué)習(xí)和使用angular.js踩到的坑和需要注意的點(diǎn)，方便以后自己查閱，也給同樣遇到這些問題的朋友們一些幫助，有需要的朋友們下面來一起看看吧。2016-10-10
探討AngularJs中ui.route的簡單應(yīng)用
這篇文章主要介紹了AngularJs中ui.route的簡單應(yīng)用,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下2016-11-11
Angularjs 1.3 中的$parse實(shí)例代碼
本文通過實(shí)例代碼給大家介紹了angularjs $parse的相關(guān)知識(shí)，非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友參考下吧2017-09-09