說點小案例angular的排序
<!DOCTYPE html><html ng-app="mk"> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{ margin: 0px; padding: 0px; } nav{ text-align: center; } nav>*{ vertical-align: top; } table{ width: 100%; text-align: center; } table th,td{ background: #A9A9A9; line-height: 30px; } </style> </head> <body> <div ng-controller="text"> <nav> <select ng-model="a"> <!-- 這也是表單也有數據，她可以獲取value值，這幾個值代表你循環進來的每項key名 --> <option value="num">按編號排序</option> <option value="name">按姓名排序</option> <option value="age">按年齡排序</option> </select> <select ng-model="b"> <!-- 也同樣獲取value值，當為負的時候，是倒序，正序 --> <option value="">升序</option> <option value="-">降序</option> </select> <input type="text" ng-model="s"/> </nav> <table border="0px" id="table"> <tr> <th>編號</th> <th>姓名</th> <th>年齡</th> </tr> <tr ng-repeat="value in data | orderBy:b+a | filter:s"> <!-- 過濾器過濾以下數據 b+a這樣就字符串拼接到了一起。這樣數據改變就進行了排序 --> <td>{{value.num}}</td> <td>{{value.name}}</td> <td>{{value.age}}</td> </tr> </table> </div> <script src="js/angular.min.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> var app=angular.module("mk",[]); app.controller("text",function($scope,$http){ $http.get("paixu.json").success(function(data){ $scope.data=data.xinxi $scope.a="num"; }) }); </script> </body></html>以上所述是小編給大家介紹的Angular排序實例詳解，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對武林網網站的支持！
新聞熱點
疑難解答
