本文实例讲述了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程序设计有所帮助。
如对本文有疑问, 点击进行留言回复!!
基于Angular 8和Bootstrap 4实现动态主题切换的示例代码
解决三元运算符 报错“SyntaxError: can''t assign to conditional expression”
解决angular 使用原生拖拽页面卡顿及表单控件输入延迟问题
使用 Angular RouteReuseStrategy 缓存(路由)组件的实例代码
分享Angular http interceptors 拦截器使用(推荐)
网友评论