Angularjs过滤器实现动态搜索与排序功能示例

本文实例讲述了Angularjs过滤器实现动态搜索与排序功能。分享给大家供大家参考，具体如下：

利用angularjs实现动态的插入以及利用过滤器进行数据的搜索以及排序。

！DOCTYPE html html lang=' en ' ng-app=' myApp ' head meta charset=' UTF-8 ' titlewww.jb51.net AngularJS过滤器测试/title/head body ng-controller=' app ' table tr TD ng-click=' sort '(名称)姓名/td td ng-click='sort('age ')年龄/TD/tr/ng-repeat=' arr 1中的arr 1 ' TD { { arr 1 }。name } }/TD { { arr 1。年龄} }/TD/tr/表格输入id=' Wei ' type=' text ' ng-focus=' concent()'输入类型=' button ' ng-click=' search()' value='搜索/body脚本src=' http : angular。量滴js '/script script src=' http : jquery。js/script脚本//var Wei=文档。getelementbyid(' Wei ')；//控制台。日志(魏)；//setTimeout(函数(){//$(' # Wei ')).attr('disabled '，false)；//},3000);var m=angular.module('myApp '，[])；m.controller('app '，['$scope '，' $filter '，function($scope，$filter){ var arr=[ {'name': '猪，' age':20}，{'name': '小猪，' age':23}，{'name': '大猫，' age':227}，{'name': '老虎，' age':29}，{'name': '中虎，' age':29}，{'name': '老虎，' age':39}，{'name': '老猫，' age':47}，{'name': '熊猫，' age':29}，{'name': '树懒，' age':27}，{'name': '狮子，' age ' :59 }]；$ scope.arr1=arr//实现查询功能var isopen=true$ scope。sort=function(str){ $ scope。arr 1=$ filter(' order by ')($ scope。arr 1，str，iso pen)；isopen=！iso pen//控制台。日志(iso pen)；};$ scope。concent=function(){ console。日志('已聚焦');} //实现查询功能$ scope。search=function(){控制台。日志(11)；$ scope。arr 1=$ filter(' filter ')(arr，document.getElementById('wei ').值);} }]);/script/html运行效果：

更多关于AngularJS相关内容感兴趣的读者可查看本站专题： 《AngularJS指令操作技巧总结》 、 《AngularJS入门与进阶教程》 及《AngularJS MVC架构总结》

希望本文所述对大家AngularJS程序设计有所帮助。