Angularjs过滤器完成排序功能实例详解

互联网 18-2-7

本文主要和大家详细介绍了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过滤器filter用法实例分析

详解AngularJS过滤器的使用_AngularJS

以上就是Angularjs过滤器完成排序功能实例详解的详细内容，更多内容请关注技术你好其它相关文章！

来源链接：

免责声明：
1.资讯内容不构成投资建议，投资者应独立决策并自行承担风险
2.本文版权归属原作所有，仅代表作者本人观点，不代表本站的观点或立场

标签：过滤器