Angular实现的内置过滤器orderBy排序与模糊查询功能示例
程序员文章站
2022-05-03 09:29:40
本文实例讲述了angular实现的内置过滤器orderby排序与模糊查询功能。分享给大家供大家参考,具体如下:
先来看看运行效果:
具体代码如下:
<...
本文实例讲述了angular实现的内置过滤器orderby排序与模糊查询功能。分享给大家供大家参考,具体如下:
先来看看运行效果:
具体代码如下:
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>www.jb51.net 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权威教程",public:false,update:"1204707661308",has:false },{ name:"vue实战",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显示两条数据--> <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>
更多关于angularjs相关内容感兴趣的读者可查看本站专题:《angularjs指令操作技巧总结》、《angularjs入门与进阶教程》及《angularjs mvc架构总结》
希望本文所述对大家angularjs程序设计有所帮助。
上一篇: React数据传递之组件内部通信的方法
下一篇: 书单|人生苦短,你还不用python!