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 UI的拖拽功能实现方法小结
Mar 14 Javascript
Firefox中通过JavaScript复制数据到剪贴板(Copy to Clipboard 跨浏览器版)
Nov 22 Javascript
JavaScript的strict模式与with关键字介绍
Feb 08 Javascript
调整小数的格式保留小数点后两位
May 14 Javascript
js的touch事件的实际引用
Oct 13 Javascript
jQuery实现的Tab滑动选项卡及图片切换(多种效果)小结
Sep 14 Javascript
基于JavaScript实现手机短信按钮倒计时(超简单)
Dec 30 Javascript
浅析jquery数组删除指定元素的方法:grep()
May 19 Javascript
基于JS代码实现当鼠标悬停表格上显示这一格的全部内容
Jun 12 Javascript
jQuery页面元素动态添加后绑定事件丢失方法,非 live
Jun 16 Javascript
Vue 2.5.2下axios + express 本地请求404的解决方法
Feb 21 Javascript
JQuery选中select组件被选中的值方法
Mar 08 jQuery
微信小程序 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中批量删除Mysql中相同前缀的数据表的代码
2011/07/01 PHP
php数组函数序列 之array_count_values() 统计数组中所有值出现的次数函数
2011/10/29 PHP
php 强制下载文件实现代码
2013/10/28 PHP
PHP使用glob函数遍历目录或文件夹的方法
2014/12/16 PHP
Symfony2安装第三方Bundles实例详解
2016/02/04 PHP
PHP session 会话处理函数
2016/06/06 PHP
PHP 匿名函数与注意事项详细介绍
2016/11/26 PHP
使用PHPExcel实现数据批量导出为excel表格的方法(必看)
2017/06/09 PHP
对字符串进行HTML编码和解码的JavaScript函数
2010/02/01 Javascript
JQuery AJAX 中文乱码问题解决
2013/06/05 Javascript
jQuery对html元素取值与赋值的方法
2013/11/20 Javascript
jQuery中delegate与on的用法与区别示例介绍
2013/12/20 Javascript
jQuery实现数秒后自动提交form的方法
2015/03/05 Javascript
jQuery Chart图表制作组件Highcharts用法详解
2016/06/01 Javascript
Javascript 基础---Ajax入门必看
2016/07/06 Javascript
angular实现图片懒加载实例代码
2017/06/08 Javascript
浅谈React中的元素、组件、实例和节点
2018/02/27 Javascript
微信小程序手机号码验证功能的实例代码
2018/08/28 Javascript
React 源码中的依赖注入方法
2018/11/07 Javascript
node+express框架中连接使用mysql(经验总结)
2018/11/10 Javascript
Node.js + express实现上传大文件的方法分析【图片、文本文件】
2019/03/14 Javascript
[54:53]完美世界DOTA2联赛PWL S2 GXR vs PXG 第二场 11.18
2020/11/18 DOTA
Python利用多进程将大量数据放入有限内存的教程
2015/04/01 Python
Python实现感知器模型、两层神经网络
2017/12/19 Python
python如何创建TCP服务端和客户端
2018/08/26 Python
使用python对多个txt文件中的数据进行筛选的方法
2019/07/10 Python
Python word文本自动化操作实现方法解析
2020/11/05 Python
python利用后缀表达式实现计算器功能
2021/02/22 Python
GafasWorld哥伦比亚:网上购买眼镜
2017/11/28 全球购物
介绍一下linux文件系统分配策略
2013/02/25 面试题
全神贯注教学反思
2014/02/03 职场文书
《苏珊的帽子》教学反思
2014/04/07 职场文书
工厂搬迁方案
2014/05/11 职场文书
2014年体检中心工作总结
2014/12/23 职场文书
绍兴鲁迅故居导游词
2015/02/09 职场文书
详解Nginx 被动检查服务器的存活状态
2021/10/16 Servers