Angularjs过滤器完成排序功能实例详解
- 微信应用
- 2024-10-15 03:47:01
Angularjs过滤器完成排序功能实例详解
本文主要和大家详细介绍了Angularjs使用过滤器完成排序功能，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能帮助到大家。
本文主要和大家详细介绍了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"> <p ng-controller="myController" class="container"> <nav class="navbar navbar-default"> <p class="container-fluid"> <p class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <form class="navbar-form navbar-left"> <p class="form-group"> <input type="text" class="form-control" ng-model="search" placeholder="Search"> </p> </form> </p><!-- /.navbar-collapse --> </p><!-- /.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> </p> </body> </html>Angularjs过滤器完成排序功能实例详解由讯客互联微信应用栏目发布，感谢您对讯客互联的认可，以及对我们原创作品以及文章的青睐，非常欢迎各位朋友分享到个人网站或者朋友圈，但转载请说明文章出处“Angularjs过滤器完成排序功能实例详解”
