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 相关文章推荐
基于jquery的防止大图片撑破页面的实现代码(立即缩放)
Oct 24 Javascript
js动态添加onload、onresize、onscroll事件(另类方法)
Dec 26 Javascript
JavaScript:new 一个函数和直接调用函数的区别分析
Jul 10 Javascript
JavaScript中switch判断容易犯错的一个细节
Aug 27 Javascript
JQuery插件Quicksand实现超炫的动画洗牌效果
May 03 Javascript
jQuery实现仿百度首页滑动伸缩展开的添加服务效果代码
Sep 09 Javascript
JavaScript生成二维码图片小结
Dec 27 Javascript
Javascript中字符串和数字的操作方法整理
Jan 22 Javascript
javascript DOM的详解及实例代码
Mar 06 Javascript
vue.js实现含搜索的多种复选框(附源码)
Mar 23 Javascript
JS实现的进制转换,浮点数相加,数字判断操作示例
Nov 09 Javascript
从表单校验看JavaScript策略模式的使用详解
Oct 17 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脚本中include文件出错解决方法
2008/11/20 PHP
php smarty模版引擎中变量操作符及使用方法
2009/12/11 PHP
来自phpguru得Php Cache类源码
2010/04/15 PHP
php过滤所有的空白字符(空格、全角空格、换行等)
2015/10/27 PHP
分享PHP源码批量抓取远程网页图片并保存到本地的实现方法
2015/12/01 PHP
非常好的js代码
2006/06/27 Javascript
jquery一般方法介绍 入门参考
2011/06/21 Javascript
JS限制Textarea文本域字符个数的具体实现
2013/08/02 Javascript
javascript中HTMLDOM操作详解
2014/12/11 Javascript
Javascript闭包与函数柯里化浅析
2016/06/22 Javascript
用js写的一个路由(简单实例)
2016/09/24 Javascript
基于jquery日历价格、库存等设置插件
2020/07/05 jQuery
webpack 2的react开发配置实例代码
2017/07/28 Javascript
vue生成token保存在客户端localStorage中的方法
2017/10/25 Javascript
页面点击小红心js实现代码
2018/05/26 Javascript
JSONP原理及应用实例详解
2018/09/13 Javascript
详解关于Vuex的action传入多个参数的问题
2019/02/22 Javascript
解决Vue动态加载本地图片问题
2019/10/09 Javascript
Python远程桌面协议RDPY安装使用介绍
2015/04/15 Python
python+pyqt实现右下角弹出框
2017/10/26 Python
python 消除 futureWarning问题的解决
2019/12/25 Python
Python文字截图识别OCR工具实例解析
2020/03/05 Python
pycharm中导入模块错误时提示Try to run this command from the system terminal
2020/03/26 Python
动态设置django的model field的默认值操作步骤
2020/03/30 Python
Jupyter Notebook打开任意文件夹操作
2020/04/14 Python
基于python SMTP实现自动发送邮件教程解析
2020/06/02 Python
超级实用的8个Python列表技巧
2020/08/24 Python
英国人最爱的饰品网站:Accessorize
2016/08/22 全球购物
瑜伽服装品牌:露露柠檬(lululemon athletica)
2017/06/04 全球购物
MySQL面试题目集锦
2016/04/14 面试题
电台实习生求职信
2014/02/25 职场文书
请假条格式范文
2014/04/10 职场文书
尊师重教演讲稿
2014/09/04 职场文书
庆祝国庆节演讲稿2014
2014/09/19 职场文书
Python中rapidjson参数校验实现
2021/07/25 Python
mysql中如何用命令创建联合唯一索引
2022/04/20 MySQL