Angularjs使用过滤器完成排序功能
更新时间：2017年09月20日 15:48:48 作者：落笔_
这篇文章主要为大家详细介绍了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>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
您可能感兴趣的文章:
相关文章
AngularJS2 与 D3.js集成实现自定义可视化的方法
本篇文章主要介绍了ANGULAR2 与 D3.js集成实现自定义可视化的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-12-12
Angular项目中$scope.$apply()方法的使用详解
这篇文章主要给大家介绍了关于Angular项目中$scope.$apply()方法使用的相关资料，文中通过示例代码介绍的非常详细，对大家学习或者使用Angularjs具有一定的参考学习价值，需要的朋友们下面跟着小编一起来看看吧。2017-07-07
今天小编就为大家分享一篇AngularJs返回前一页面时刷新一次前面页面的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-10-10
这篇文章主要介绍了AngularJS $injector 依赖注入的相关资料,需要的朋友可以参考下2016-09-09
这篇文章主要介绍了Angular实现svg和png图片下载实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-05-05
我们的接口是单独编写的处理的，在实际的开发项目中，有众多的接口，有些需要登陆凭证，有些不需要。一个一个接口处理不妥，我们是否可以考虑对请求进行拦截封装，感兴趣的可以了解一下2022-04-04
深入解析AngularJS框架中$scope的作用与生命周期
这篇文章主要介绍了AngularJS中$scope的作用与生命周期,包括在DOM中添加controller对象的相关用法,需要的朋友可以参考下2016-03-03
angularjs 中可通过三种（$provider,$factory,$service）方式自定义服务。这篇文章主要介绍了Angularjs 自定义服务的三种方式,非常不错，需要的朋友可以参考下2016-08-08
AngularJS自带了很多验证，什么必填，最大长度，最小长度...，这里记录几个有用的正则式验证。本文给大家介绍的非常详细，对angularjs中表单验证知识感兴趣的朋友一起学习吧2016-11-11
这篇文章主要介绍了Angular2.js实现表单验证的相关资料，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-06-06
最新评论