快捷導(dǎo)航

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í)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

收藏AngularJS中最重要的核心功能
本文是小編日常收集整理的關(guān)于：AngularJS中最重要的核心功能，非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友參考下吧
2017-07-07
Angular中的interceptors攔截器
這篇文章主要介紹了Angular中的interceptors攔截器,需要的朋友可以參考下
2017-06-06
AngulaJS路由 ui-router 傳參實(shí)例
本篇文章主要介紹了AngulaJS路由 ui-router 傳參實(shí)例，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2017-04-04
AngularJS基礎(chǔ) ng-include 指令簡(jiǎn)單示例
本文主要介紹AngularJS ng-include 指令,這里對(duì)ng-include的基本知識(shí)做了整理,并附有代碼實(shí)例,有需要的朋友可以參考下
2016-08-08
使用Angular自定義字段校驗(yàn)指令的方法示例
這篇文章主要介紹了使用Angular自定義字段校驗(yàn)指令的方法示例，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2019-02-02
ng-zorro-antd 入門(mén)初體驗(yàn)
這篇文章主要介紹了ng-zorro-antd 入門(mén)初體驗(yàn)，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2018-12-12
Angular PWA使用的Demo示例
這篇文章主要介紹了Angular PWA使用的Demo示例，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2019-01-01
AngularJS使用ng-repeat遍歷二維數(shù)組元素的方法詳解
這篇文章主要介紹了AngularJS使用ng-repeat遍歷二維數(shù)組元素的方法,結(jié)合實(shí)例形式分析了AngularJS二維數(shù)組元素遍歷的相關(guān)操作技巧,需要的朋友可以參考下
2017-11-11
angularjs2 ng2 密碼隱藏顯示的實(shí)例代碼
本篇文章主要介紹了angularjs2 ng2 密碼隱藏顯示的實(shí)例代碼，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-08-08
Angular之jwt令牌身份驗(yàn)證的實(shí)現(xiàn)
這篇文章主要介紹了Angular之jwt令牌身份驗(yàn)證的實(shí)現(xiàn)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2020-02-02