Angularjs使用過(guò)濾器完成排序功能
更新時(shí)間：2017年09月20日 15:48:48 作者：落筆_
這篇文章主要為大家詳細(xì)介紹了Angularjs使用過(guò)濾器完成排序功能，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
本文實(shí)例為大家分享了Angularjs過(guò)濾器完成排序的具體代碼，供大家參考，具體內(nèi)容如下
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="js/angularjs.js" ></script>
<link rel="stylesheet" href="css/bootstrap.css" rel="external nofollow" />
<script>
angular.module('myApp',[])
.service('data',function(){
return [
{id:1234,name:'ipad',price:3400},
{id:1244,name:'aphone',price:6400},
{id:1334,name:'mypad',price:4400},
{id:8234,name:'zpad',price:8400}
];
})
.controller('myController',function($scope,data){
$scope.data=data;
$scope.change=function(order){
//$scope.orderType='';
$scope.order=order;
if($scope.orderType==''){
$scope.orderType='-';
}else{
$scope.orderType='';
}
}
})
</script>
<style>
.red{color: red;}
</style>
</head>
<body ng-app="myApp">
<div ng-controller="myController" class="container">
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<form class="navbar-form navbar-left">
<div class="form-group">
<input type="text" class="form-control" ng-model="search" placeholder="Search">
</div>
</form>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
<table class="table table-bordered table-hover">
<thead>
<tr>
<th ng-click="change('id')" ng-class="{dropup:orderType==''}">id<span ng-class="{red:order=='id'}" class="caret"></span></th>
<th ng-click="change('name')" ng-class="{dropup:orderType==''}">name<span ng-class="{red:order=='name'}" class="caret"></span></th>
<th ng-click="change('price')" ng-class="{dropup:orderType==''}">price<span ng-class="{red:order=='price'}" class="caret"></span></th>
</tr>
</thead>
<tbody>
<tr ng-repeat="x in data | filter:search | orderBy:orderType+order ">
<td>{{x.id}}</td>
<td>{{x.name}}</td>
<td>{{x.price}}</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
您可能感興趣的文章:
- Angularjs過(guò)濾器實(shí)現(xiàn)動(dòng)態(tài)搜索與排序功能示例
- AngularJS常見(jiàn)過(guò)濾器用法實(shí)例總結(jié)
- AngularJs 常用的過(guò)濾器
- 詳解AngularJS中$filter過(guò)濾器使用(自定義過(guò)濾器)
- 實(shí)例解析angularjs的filter過(guò)濾器
- AngularJS過(guò)濾器filter用法總結(jié)
- Angular實(shí)現(xiàn)的自定義模糊查詢(xún)、排序及三角箭頭標(biāo)注功能示例
- AngularJS模糊查詢(xún)功能實(shí)現(xiàn)代碼(過(guò)濾內(nèi)容下拉菜單排序過(guò)濾敏感字符驗(yàn)證判斷后添加表格信息)
- AngularJS 過(guò)濾與排序詳解及實(shí)例代碼
- AngularJS ng-table插件設(shè)置排序
- Angular實(shí)現(xiàn)的內(nèi)置過(guò)濾器orderBy排序與模糊查詢(xún)功能示例
相關(guān)文章
AngularJS2 與 D3.js集成實(shí)現(xiàn)自定義可視化的方法
本篇文章主要介紹了ANGULAR2 與 D3.js集成實(shí)現(xiàn)自定義可視化的方法，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-12-12
Angular項(xiàng)目中$scope.$apply()方法的使用詳解
這篇文章主要給大家介紹了關(guān)于A(yíng)ngular項(xiàng)目中$scope.$apply()方法使用的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家學(xué)習(xí)或者使用Angularjs具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面跟著小編一起來(lái)看看吧。2017-07-07
AngularJs返回前一頁(yè)面時(shí)刷新一次前面頁(yè)面的方法
今天小編就為大家分享一篇AngularJs返回前一頁(yè)面時(shí)刷新一次前面頁(yè)面的方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-10-10
AngularJS $injector 依賴(lài)注入詳解
這篇文章主要介紹了AngularJS $injector 依賴(lài)注入的相關(guān)資料,需要的朋友可以參考下2016-09-09
Angular實(shí)現(xiàn)svg和png圖片下載實(shí)現(xiàn)
這篇文章主要介紹了Angular實(shí)現(xiàn)svg和png圖片下載實(shí)現(xiàn)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-05-05
我們的接口是單獨(dú)編寫(xiě)的處理的，在實(shí)際的開(kāi)發(fā)項(xiàng)目中，有眾多的接口，有些需要登陸憑證，有些不需要。一個(gè)一個(gè)接口處理不妥，我們是否可以考慮對(duì)請(qǐng)求進(jìn)行攔截封裝，感興趣的可以了解一下2022-04-04
深入解析AngularJS框架中$scope的作用與生命周期
這篇文章主要介紹了AngularJS中$scope的作用與生命周期,包括在DOM中添加controller對(duì)象的相關(guān)用法,需要的朋友可以參考下2016-03-03
angularjs 中可通過(guò)三種（$provider,$factory,$service）方式自定義服務(wù)。這篇文章主要介紹了Angularjs 自定義服務(wù)的三種方式,非常不錯(cuò)，需要的朋友可以參考下2016-08-08
AngularJS自帶了很多驗(yàn)證，什么必填，最大長(zhǎng)度，最小長(zhǎng)度...，這里記錄幾個(gè)有用的正則式驗(yàn)證。本文給大家介紹的非常詳細(xì)，對(duì)angularjs中表單驗(yàn)證知識(shí)感興趣的朋友一起學(xué)習(xí)吧2016-11-11
Angular2.js實(shí)現(xiàn)表單驗(yàn)證詳解
這篇文章主要介紹了Angular2.js實(shí)現(xiàn)表單驗(yàn)證的相關(guān)資料，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-06-06