Angularjs使用过滤器完成排序功能


Posted in Javascript onSeptember 20, 2017

本文实例为大家分享了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" 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>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript 简单高效判断数据类型 系列函数 By shawl.qiu
Mar 06 Javascript
jQuery 动画基础教程
Dec 25 Javascript
javascript Array.remove() 数组删除
Aug 06 Javascript
JS 类型转换常见方法小结
May 31 Javascript
实例详解AngularJS实现无限级联动菜单
Jan 15 Javascript
JS修改地址栏参数实例代码
Jun 14 Javascript
Vue.js展示AJAX数据简单示例讲解
Mar 29 Javascript
Angular2入门教程之模块和组件详解
May 28 Javascript
vue loadmore组件上拉加载更多功能示例代码
Jul 19 Javascript
深入理解JavaScript的值传递和引用传递
Oct 24 Javascript
ES6中Symbol、Set和Map用法详解
Aug 20 Javascript
Vue js with语句原理及用法解析
Sep 03 Javascript
微信小程序 swiper组件构建轮播图的实例
Sep 20 #Javascript
node+koa实现数据mock接口的方法
Sep 20 #Javascript
详解angularjs popup-table 弹出框表格指令
Sep 20 #Javascript
ES6中Array.includes()函数的用法
Sep 20 #Javascript
微信小程序视图template模板引用的实例详解
Sep 20 #Javascript
highcharts 在angular中的使用示例代码
Sep 20 #Javascript
jQuery实现可兼容IE6的滚动监听功能
Sep 20 #jQuery
You might like
php for 循环使用的简单实例
2016/06/02 PHP
JavaScript对象和字串之间的转换实例探讨
2013/04/21 Javascript
JavaScript数组对象赋值用法实例
2015/08/04 Javascript
cocos2dx骨骼动画Armature源码剖析(一)
2015/09/08 Javascript
JS在一定时间内跳转页面及各种刷新页面的实现方法
2016/05/26 Javascript
Bootstrap精简教程中秋大放送
2016/09/15 Javascript
使用jquery.qrcode.js生成二维码插件
2016/10/17 Javascript
jquery easyui DataGrid简单示例
2017/01/23 Javascript
详解node HTTP请求客户端 - Request
2017/05/05 Javascript
详解Angular-cli生成组件修改css成less或sass的实例
2017/07/27 Javascript
Vue多种方法实现表头和首列固定的示例代码
2018/02/02 Javascript
ES6 如何改变JS内置行为的代理与反射
2019/02/11 Javascript
原生js基于canvas实现一个简单的前端截图工具代码实例
2019/09/10 Javascript
k8s node节点重新加入master集群的实现
2021/02/22 Javascript
[32:36]完美世界DOTA2联赛PWL S3 LBZS vs CPG 第二场 12.12
2020/12/16 DOTA
python 将字符串转换成字典dict
2013/03/24 Python
Python 3.6 读取并操作文件内容的实例
2018/04/23 Python
Python(Django)项目与Apache的管理交互的方法
2018/05/16 Python
Python 分发包中添加额外文件的方法
2019/08/16 Python
django 中使用DateTime常用的时间查询方式
2019/12/03 Python
Python3之外部文件调用Django程序操作model等文件实现方式
2020/04/07 Python
Flask中jinja2的继承实现方法及实例
2021/03/03 Python
CSS3的transition和animation的用法实例介绍
2014/08/20 HTML / CSS
HTML5微信播放全屏问题的解决方法
2017/03/09 HTML / CSS
英国香水店:The Perfume Shop
2017/03/27 全球购物
英国二手物品交易网站:Preloved
2017/10/06 全球购物
锐步美国官方网站:Reebok美国
2018/01/10 全球购物
马来西亚网上花店:FlowerAdvisor马来西亚
2020/01/03 全球购物
采购助理岗位职责
2014/02/16 职场文书
陈欧广告词
2014/03/14 职场文书
代办委托书怎样写
2014/04/08 职场文书
医院信息公开实施方案
2014/05/09 职场文书
思想作风整顿个人剖析材料
2014/10/06 职场文书
老公写给老婆的检讨书
2015/05/06 职场文书
2016年八一建军节活动总结
2016/04/05 职场文书
如何使用PyCharm及常用配置详解
2021/06/03 Python