Angular JS filter
2016-07-01 11:44
435 查看
场景
一般需要先查询,再对查询结果进行过滤,这时就要用AngularJS的过滤器filter了。语法
filter使用很简单,直接在表达式后面使用管道命令符 " | " 即可。比如:{ persons | filter:query }}
排序
过滤的同时我们可以还要对结果进行排序,使用orderBy 即可。如:‘{{ persons | filter:query | orderBy:order }}
绑定
绑定很简单,直接使用ng-model即可。
ng-model="query"
例子
下面给出一个我用ng-repeat的例子。<!doctype html> <html ng-app> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script src="js/angular.js"></script> </head> <body> <div ng-controller="ctl"> Name:<input ng-model="vm.filter.name"> Age:<input ng-model="vm.filter.age"> Sort by:<select ng-model="order"> <option value="name">name</option> <option value="age">age</option> </select> <ul class="persons"> <li ng-repeat="person in vm.persons | filter:vm.filter | orderBy:order"> <span>{{person.name }}</span> <span>{{person.age}}</span> </li> </ul> </div> <script type="text/javascript"> function ctl($scope){ var vm = {}; vm.persons = [ {"name":"xingoo","age":18}, {"name":"zhangsan","age":19}, {"name":"lisi","age":20}, {"name":"wangwu","age":30}, {"name":"","age":31}, {"age":32}, {"name": undefined,"age":33} ]; $scope.order = "age"; $scope.vm = vm; } </script> </body> </html>这里就可以对数据进行过滤了。
问题
不知道你注意没,这里数据里面我最后放了三条特殊的数据:name为空白字符的记录。
没name属性的记录。
name属性值为undefined的记录。
现在对name输入任何值都可以过滤,然后把过滤的输入删除。是不是发现最后两条数据丢了!丢了!
其实当过滤的输入被清除后,其值
vm.filter.name依旧是空字符串,相当于用空字符串对数据进行过滤。所以最后两条数据被过滤掉了。
相关文章推荐
- jQuery plugin items filter
- 全国哀悼日网站页面变成灰色的filter方法
- 用css filter做鼠标滑过图片效果
- ASP 使用Filter函数来检索数组的实现代码
- JavaScript 数组some()和filter()的用法及区别
- Vue.js报错Failed to resolve filter问题的解决方法
- ASP.NET MVC:Filter和Action的执行介绍
- jQuery遍历DOM节点操作之filter()方法详解
- jQuery中each()、find()和filter()等节点操作方法详解(推荐)
- JSP Filter的应用方法
- PHP中实现Bloom Filter算法
- Jquery find与filter函数区别 说明
- AngularJS入门(用ng-repeat指令实现循环输出
- angular.element方法汇总
- 深入学习JavaScript的AngularJS框架中指令的使用方法
- Angular用来控制元素的展示与否的原生指令介绍
- 使用angular写一个hello world
- vue,angular,avalon这三种MVVM框架优缺点
- Event filter with query SELECT * FROM __InstanceModificationEvent WITHIN
- PHP内置过滤器FILTER使用实例