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" 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>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • AngularJS轻松实现双击排序的功能

    话不多说,直接看示例代码 HTML代码 <th class="col-md-3"><a href="" ng-click="desc('2',la=!la)">单价</a></th> <th class="col-md-3"><a href="" ng-click="desc('3',la=!la)">销售金额<

  • 妙用Angularjs实现表格按指定列排序

    使用AngularJS的过滤器,可以很容易的实现在表格中,点击某一列标题进行排序,实现过程如下: html代码: <table class="table table-border" ng-app="myapp" ng-controller="orderByCtrl"> <thead> <tr> <th>inx</th> <th ng-click="col='name';d

  • AngularJS ng-table插件设置排序

    AngularJS ng-table插件设置排序

    基础概念 ng-table提供了一个表头来提供,基础的过滤信息: (1)指定一列的过滤器,然后模板就会使用. (2)ngTable支持number, text, select 和 select-multiple的值模板. (3)可以有选择的为NgTableParams提供初始过滤值. <div class="row"> <div class="col-md-6" ng-controller="demoController as demo&

  • AngularJS 过滤与排序详解及实例代码

    AngularJS 过滤与排序详解及实例代码

    前面了解了AngularJS的使用方法,这里就简单的写个小程序,实现查询过滤以及排序的功能. 本程序中可以了解到: 1 angularjs的过滤器 2 ng-repeat的使用方法 3 控制器的使用 4 数据的绑定 程序设计分析 首先,如果要是先查询过滤,就要使用到AngularJS中的 过滤器filter 了. 直接在表达式的后面使用管道命令符 | ,按照下面的写法就可以达到一个过滤的效果: {{ persons | filter:query }} 通过使用filter实现过滤操作,query

  • Angularjs添加排序查询功能的实例代码

    废话不多说了,直接给大家贴代码了,具体代码如下所示: <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <script type="text/javascript" src="angular-1.3.0.js"></script&g

  • AngularJS模糊查询功能实现代码(过滤内容下拉菜单排序过滤敏感字符验证判断后添加表格信息)

    AngularJS模糊查询功能实现代码(过滤内容下拉菜单排序过滤敏感字符验证判断后添加表格信息)

    注:添加球员的功能无指定技术要求,添加球员的页面也无具体样式要求. 1.实现上图页面所有元素,页面布局规整,跟上图效果一致 2.实现文案显示,按效果显示 3.实现查询,实现查询敏感词过滤,实现查询后列表变化 4.实现倒序,实现正序,下拉列表排序效果都实现 5.按钮背景一致,按钮样式 6.实现添加球员页面,添加球员页面样式,添加球员功能,添加球员必填项判断,添加完球员后能显示在表格内,已存在球员判重. 7.表格样式跟上图样式一致 代码: <!DOCTYPE html> <html lang

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

    本文实例为大家分享了Angularjs过滤器完成排序的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript" src="js/angularjs.js" ></script>

  • angular过滤器实现排序功能

    angular过滤器实现排序功能

    本文实例为大家分享了angular过滤器排序的具体代码,供大家参考,具体内容如下 首先定义一个json文件: 然后写HTML文件: <div id="box"> <!--第一个下拉框--> <select ng-model="a"> <option value="age">按照年龄排序</option> <option value="code">按照编码排

  • Angularjs过滤器实现动态搜索与排序功能示例

    Angularjs过滤器实现动态搜索与排序功能示例

    本文实例讲述了Angularjs过滤器实现动态搜索与排序功能.分享给大家供大家参考,具体如下: 利用angularjs实现动态的插入以及利用过滤器进行数据的搜索以及排序. <!DOCTYPE html> <html lang="en" ng-app="myApp"> <head> <meta charset="UTF-8"> <title>www.jb51.net AngularJS过滤

  • Angular实现的内置过滤器orderBy排序与模糊查询功能示例

    Angular实现的内置过滤器orderBy排序与模糊查询功能示例

    本文实例讲述了Angular实现的内置过滤器orderBy排序与模糊查询功能.分享给大家供大家参考,具体如下: 先来看看运行效果: 具体代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>www.jb51.net Angular模糊查询.排序</title> <style> *{ ma

  • 基于AngularJS拖拽插件ngDraggable.js实现拖拽排序功能

    基于AngularJS拖拽插件ngDraggable.js实现拖拽排序功能

    ngDraggable.js是一款比较简单实用的angularJS拖拽插件,借助于封装好的一些自定义指令,能够快速的进行一些拖拽应用开发.首先先介绍一些基本的概念; •ng-drop:是否允许放入拖拽元素 •ng-drop-success($data, $event):拖拽元素放入的回调;$data:放入元素数据:$event拖拽事件对象 •ng-drag:元素是否允许拖拽 •ng-drag-success($data, $event):$data:拖拽元素数据,$event拖拽元素事件对象 •

  • 详解Angularjs filter过滤器

    系统的学习了一下angularjs,发现angularjs的有些思想根php的模块smarty很像,例如数据绑定,filter.如果对smarty比较熟悉的话,学习angularjs会比较容易一点.这篇简单说一下angularjs的filter功能,angularjs的filter功能可分为二种,一种是内置的过滤器,一种是自定义的. Filter是用来格式化数据用的. Filter的基本原型( '' 类似于Linux中的管道模式): {{ expression filter }} Filter可

  • AngularJS常见过滤器用法实例总结

    本文实例讲述了AngularJS常见过滤器用法.分享给大家供大家参考,具体如下: 过滤器用来格式化需要展示给用户的数据.在HTML中的模板绑定符号 {{ }} 内通过 | 符号来调用过滤器.以下是常用的过滤器. 大小写过滤器 {{ name | uppercase }} 大写过滤器 {{ name | lowercase}} 小写过滤器 实例:(大写过滤器) <div ng-controller='myController'> 姓氏: <input type="text&quo

  • 基于AngularJS+HTML+Groovy实现登录功能

    基于AngularJS+HTML+Groovy实现登录功能

    AngularJS是开发基于浏览器的响应式RWD应用程序的一个前端MVC框架,由谷歌最初开发的 开源项目,干净的架构吸引了大量粉丝,适合建立CRUD类型的业务应用程序,并不适合开发游戏等应用, 使用声明性编程的用户界面和命令式编程的逻辑, 支持现代桌面和移动浏览器 Internet Explorer版本8.0及以上. AngularJS是一款客户端MVC的javascript框架,而客户端MVC代表未来架构(为什么要使用MVC+REST+CQRS 架构),如果你有Struts或SpringMVC

  • Angular实现的table表格排序功能完整示例

    Angular实现的table表格排序功能完整示例

    本文实例讲述了Angular实现的table表格排序功能.分享给大家供大家参考,具体如下: 先来看看效果图: 完整代码如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>www.jb51.net Angular表格排序</title> <style> table{ border: 1px solid; text-align:

随机推荐