这篇文章主要为大家详细介绍了Angularjs使用过滤器完成排序功能,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

本文实例为大家分享了Angularjs过滤器完成排序的具体代码,供大家参考,具体内容如下

<!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"> 
<nav> 
 <div> 
 <div id="bs-example-navbar-collapse-1"> 
  <form> 
  <div> 
   <input type="text" ng-model="search"> 
  </div> 
  </form> 
 </div><!-- /.navbar-collapse --> 
 </div><!-- /.container-fluid --> 
</nav> 
<table> 
<thead> 
<tr> 
<th ng-click="change('id')" ng-class="{dropup:orderType==''}">id<span ng-class="{red:order=='id'}"></span></th> 
<th ng-click="change('name')" ng-class="{dropup:orderType==''}">name<span ng-class="{red:order=='name'}"></span></th> 
<th ng-click="change('price')" ng-class="{dropup:orderType==''}">price<span ng-class="{red:order=='price'}"></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> 

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持爱安网。

最新资讯
新加坡年底将颁发数码银行执照,蚂蚁、字节参与竞标

新加坡年底将颁发数码

新加坡预计今年底颁发最多五个纯数码银行执照。蚂蚁集
华为整合智能汽车与手机业务:余承东牵头 重申不造车

华为整合智能汽车与手

华为今日在心声社区发布华为创始人任正非签发的《关于
华为:谁再建言造车干扰公司,调离岗位

华为:谁再建言造车干扰

华为再次重申,华为不造整车,而是聚焦ICT技术,帮助车企造
小米港股开盘跌逾2% 此前被麦格理大和证券下调评级

小米港股开盘跌逾2%

11月25日上午港股开盘,香港恒生指数开盘涨0.87%,报26819
优胜教育:"9000余万元补偿金"仅代表社会机构给出的同等价值补偿

优胜教育:"9000余万元

针对资金链断裂,后续9000余万元的补偿一事,优胜教育总裁
京东成立京东探索研究院 招募6大领域世界顶级科学家

京东成立京东探索研究

据悉,京东探索研究院将深耕“人工智能”、“量子计算”
最新文章
详解Vue的ref特性的使用

详解Vue的ref特性的使

这篇文章主要介绍了详解Vue的ref特性的使用,文中通过
vue学习笔记之slot插槽基本用法实例分析

vue学习笔记之slot插

这篇文章主要介绍了vue学习笔记之slot插槽基本用法,结
vue跳转方式(打开新页面)及传参操作示例

vue跳转方式(打开新页

这篇文章主要介绍了vue跳转方式(打开新页面)及传参操作,
vue学习笔记之过滤器的基本使用方法实例分析

vue学习笔记之过滤器

这篇文章主要介绍了vue学习笔记之过滤器的基本使用方
js获取本日、本周、本月的时间代码

js获取本日、本周、本

本篇文章给大家分享的内容是利用js如何获取本日、本周
node crawler如何添加promise支持

node crawler如何添加

这篇文章主要介绍了node crawler如何添加promise支持,