angular過濾器實現(xiàn)排序功能
更新時間：2017年06月27日 08:39:08 作者：Code_User
這篇文章主要為大家詳細介紹了angular過濾器實現(xiàn)排序功能，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文實例為大家分享了angular過濾器排序的具體代碼，供大家參考，具體內(nèi)容如下
首先定義一個json文件：
然后寫HTML文件：
<div id="box">
<!--第一個下拉框-->
<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>
<!--一個搜索框-->
<input type="text" placeholder="請輸入要搜索的內(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>
在這種運用到的過濾器有filter 、orderBy
這樣就完成了一個簡單的排序，希望能幫到大家！
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要為大家纖細介紹了AngularJS directive返回對象屬性的相關(guān)內(nèi)容，感興趣的小伙伴們可以參考一下2016-03-03
本文主要講解AngularJS ng-checked 指令,在這整理ng-checked 指令的基礎(chǔ)知識,并附代碼實例,有需要的小伙伴可以參考下2016-08-08
Angular.js基礎(chǔ)學(xué)習(xí)之初始化
這篇文章主要介紹了Angular.js基礎(chǔ)學(xué)習(xí)之初始化的相關(guān)資料，AngularJS 啟動有兩種方式，一種是綁定初始化，自動加載，另外一種是手動初始化，文中介紹的很詳細，需要的朋友可以參考下。2017-03-03
詳解angular中通過$location獲取路徑(參數(shù))的寫法
本篇文章主要介紹了詳解angular中通過$location獲取路徑(參數(shù))的寫法 ，具有一定的參考價值，感興趣的小伙伴們可以參考一下。2017-03-03
關(guān)于AngularJS中幾種Providers的區(qū)別總結(jié)
這篇文章主要給大家介紹了關(guān)于AngularJS中幾種Providers的區(qū)別的相關(guān)資料，文中通過示例代碼介紹的非常詳細，對大家學(xué)習(xí)或者使用AngularJS具有一定的參考學(xué)習(xí)價值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧2020-05-05
這篇文章主要介紹了Angular2 (RC4) 路由與導(dǎo)航的相關(guān)資料,需要的朋友可以參考下2016-09-09
AngularJS constant和value區(qū)別詳解
angularJS可以通過constant(name,value)和value(name,value)對于創(chuàng)建服務(wù)也是很重要的。他們之間有什么不同呢？今天小編給大家分享AngularJS constant和value區(qū)別詳解，需要的朋友參考下2017-02-02
angular框架實現(xiàn)全選與單選chekbox的自定義
這篇文章主要介紹了angular框架實現(xiàn)全選與單選chekbox的自定義,具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-07-07
angularjs使用gulp-uglify壓縮后執(zhí)行報錯的解決方法
下面小編就為大家分享一篇angularjs使用gulp-uglify壓縮后執(zhí)行報錯的解決方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-03-03
使用AngularJS實現(xiàn)可伸縮的頁面切換的方法
這篇文章主要介紹了使用AngularJS實現(xiàn)可伸縮的頁面切換的方法,AngularJS是一款熱門的JavaScript庫,需要的朋友可以參考下2015-06-06