溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

Angularjs如何使用過(guò)濾器完成排序功能

發(fā)布時(shí)間：2021-07-09 14:03:34 來(lái)源：億速云 閱讀：105 作者：小新 欄目：web開(kāi)發(fā)

這篇文章給大家分享的是有關(guān)Angularjs如何使用過(guò)濾器完成排序功能的內(nèi)容。小編覺(jué)得挺實(shí)用的，因此分享給大家做個(gè)參考，一起跟隨小編過(guò)來(lái)看看吧。

具體內(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>

感謝各位的閱讀！關(guān)于“Angularjs如何使用過(guò)濾器完成排序功能”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，讓大家可以學(xué)到更多知識(shí)，如果覺(jué)得文章不錯(cuò)，可以把它分享出去讓更多的人看到吧！

向AI問(wèn)一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手