本文實例講述了Angular實現(xiàn)的內(nèi)置過濾器orderBy排序與模糊查詢功能。分享給大家供大家參考，具體如下：
先來看看運行效果：
具體代碼如下：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>m.survivalescaperooms.com Angular模糊查詢、排序</title> <style> *{ margin: 0; padding: 0; } table{ margin: 100px auto; border-collapse: collapse; } th,td{ padding: 10px; border: 1px solid #000; } </style> <script src="angular.min.js"></script> <script> var myapp=angular.module("myapp",[]); myapp.controller("myCtrl",function ($scope) { $scope.books=[{ name:"JavaScript",public:false,update:"1504707661308",has:true },{ name:"Angular權(quán)威教程",public:false,update:"1204707661308",has:false },{ name:"Vue實戰(zhàn)",public:false,update:"1804707661308",has:false },{ name:"JavaScript",public:true,update:"1504707561308",has:true }]; $scope.price="99.9"; /*$scope.filt=""*/ }) </script></head><body ng-app="myapp" ng-controller="myCtrl"><input type="text" ng-model="filt"><table> <thead><tr> <th>名字</th> <th>出版情況</th> <th>更新時間</th> <th>是否有庫存</th> </tr></thead> <tbody> <!--|limitTo:2顯示兩條數(shù)據(jù)--> <tr ng-repeat="item in books | filter:filt |orderBy:'-name':false"> <td>{{item.name|lowercase}}</td> <td>{{item.public}}</td> <td>{{item.update |date:'yyyy年MM月dd日 hh:mm:ss EEE'}}</td> <td>{{item.has}}</td> </tr> </tbody></table><div>{{price|currency:"￥"}}</div></body></html>更多關(guān)于AngularJS相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《AngularJS指令操作技巧總結(jié)》、《AngularJS入門與進階教程》及《AngularJS MVC架構(gòu)總結(jié)》
希望本文所述對大家AngularJS程序設(shè)計有所幫助。
新聞熱點
疑難解答
