这篇文章给大家分享的是有关Angularjs如何使用过滤器完成排序功能的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。
成都创新互联公司专注于中大型企业的网站制作、成都网站建设和网站改版、网站营销服务,追求商业策划与数据分析、创意艺术与技术开发的融合,累计客户上千余家,服务满意度达97%。帮助广大客户顺利对接上互联网浪潮,准确优选出符合自己需要的互联网运用,我们将一直专注品牌网站制作和互联网程序开发,在前进的路上,与客户一起成长!
具体内容如下
<!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>
感谢各位的阅读!关于“Angularjs如何使用过滤器完成排序功能”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,让大家可以学到更多知识,如果觉得文章不错,可以把它分享出去让更多的人看到吧!
网站题目:Angularjs如何使用过滤器完成排序功能
文章网址:https://www.cdcxhl.com/article28/ipgocp.html
成都网站建设公司_创新互联,为您提供外贸网站建设、网站策划、微信小程序、搜索引擎优化、定制开发、微信公众号
声明:本网站发布的内容(图片、视频和文字)以用户投稿、用户转载内容为主,如果涉及侵权请尽快告知,我们将会在第一时间删除。文章观点不代表本网站立场,如需处理请联系客服。电话:028-86922220;邮箱:631063699@qq.com。内容未经允许不得转载,或转载时需注明来源: 创新互联