有角度实现的自定义模糊查询、排序及三角箭头标注功能示例

本文实例讲述了有角的实现的自定义模糊查询、排序及三角箭头标注功能。分享给大家供大家参考，具体如下：

先来看看运行效果：

具体代码如下：

！DOCTYPE html html lang=' en ' head meta charset=' UTF-8 ' titlewww.jb51.net Angular模糊查询、排序/title style * { margin : 0；padd : 0；}表格{边框-折叠：折叠；} TD { padd : 10pxborder : 1px固体# 000;} .top { display : inline-block；宽度： 0;高度： 0;border: 10px固体透明；边框-top:10px纯红；} .bot { display : inline-block；宽度： 0;高度： 0;border: 10px固体透明；边框-底部：10px纯红；}/style脚本src=' http : angular。量滴js '/script脚本var myapp=angular。模块(' myapp '，[])；myapp.controller('myCtrl '，函数($ scope){ var userInfo=[{ name : ' marry '，salary:12345，sex:'girl '，生日：150511954735 }，{name:'Lily '，salary:12425，sex 3360 ' girl '，生日：1505711954735 }，$ scope自定义的模糊查询*/$作用域。搜索=' '；$ scope。search fun=function(obj){ if($ scope)。搜索！=''){ if(obj.name.toLowerCase().indexOf($作用域。搜索。tolowercase())！=-1){返回true} else {返回false} }else{返回true } }/* 排序*/$作用域。sort=' name$ scope。reverse=false$ scope.sortFun=函数（列){ if($ scope。sort==列){ $ scope.revers=！$ scope。反转；} else { $ scope . reverse=false } $ scope . sort=列；};$ scope。getclass=function(column){ if($ scope)。sort==column){ if($ scope)。reverse==false){ return ' top ' } else { return ' bot ' } } })/script/head dy ng-app=' myapp ' ng-controller=' myCtrl '输入类型=' text ' ng-model=' search '表和th编号/th ng-click=“排序乐趣(名称)”姓名span ng-class=' GetClass(' name ')'/span/th ng-click=' sort fun('薪资)薪资span ng-class=' getClass('薪资')'/span/th ng-click=' sort fun(' sex ')性别span ng-class=' getClass(' sex ')'/span/th ng-click=' sort fun('生日)生日span ng-class='getClass('生日)'/span/th/ad t body tr ng-repeat=' arr | filter : earch fun : value | order by : sort ' TD { { $ index } }/TD { { item。 名称|大写} }/TD { { item。工资|货币： ' $ ' }/TD TD { { item }。性别} }/TD { { item。生日|日期： '注：代码中尚有功能不够完善的部分，感兴趣的朋友可以自行加以完善。

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

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