AngularJS filter:search 是如何匹配的 ng-repeat filter:search ,filter:{$:search},只取repeat的item的value 不含label
1. filter可以接收参数,参数用 : 进行分割,如下:
{{ expression | filter:argument1:argument2:... }}
2. filter参数是 对象 ,匹配属性中含有value的
$scope.childrenArray = [
{name:'kimi',age:3},
{name:'cindy',age:4},
{name:'anglar',age:4},
{name:'shitou',age:6},
{name:'tiantian',age:5}
]; {{ childrenArray | filter : {name : 'i'} }} //参数是对象,匹配name属性中含有i的
示例:angular filter多个字段搜索
<input type="text" ng-model="search "> <!--<li ng-repeat="user in data.users | filter:{name:search}> -->
<!--此时只搜索了name字段--> <!--搜索name字段、account字段-->
<li ng-repeat="user in data.users | filter:{name:search}:{account:search}>
<span ng-bind="user.name"></span>
<span ng-bind="user.account"></span>
</li>
3. 没有指定过滤哪个字段的情况下,默认filter会匹配所有字段(name、account)的值,类似 多个字段搜索
ng-repeat="user in data.users | filter:search
4. $ 匹配 对象 所有属性 和 嵌套对象属性
<li ng-repeat="user in data.users | filter:{$:search}>
5. bind ng-model to the “value” of selected item instead of item for ui-select
<ui-select ng-model="fm.countryCode" id="countryCode">
<ui-select-match placeholder="Select a country...">{{$select.selected.label}}</ui-select-match>
<ui-select-choices repeat="item in countries | filter: $select.search" value="{{$select.selected.value}}">
<div ng-bind-html="item.label | highlight: $select.search"></div>
<small ng-bind-html="item.value | highlight: $select.search"></small>
</ui-select-choices>
</ui-select>
Currently it's just setting fm.countryCode to the whole country item.
For example if I select Afghanistan, fm.countryCode will be set to {"value":"AF","label":"Afghanistan"}.
What I want is "AF".
so change the repeat part
<ui-select-choices repeat="item in countries | filter: $select.search" value="{{$select.selected.value}}">
to
<ui-select-choices repeat="item.value as item in countries | filter: $select.search" value="{{$select.selected.value}}">
示例:
<ui-select ng-model="networkDefaultValue.resourceId" name="networkname" theme="bootstrap" ng-change="setInputDefaultValue(['resource_id'],networkDefaultValue.resourceId,networkDefaultValue.isResourceIdInput)">
<ui-select-match allow-clear="true" placeholder="{{'Select an option'|translate}}">{{$select.selected.name + ' - ' + $select.selected.properties.datacentername}}</ui-select-match>
<ui-select-choices repeat="resource.id as resource in totalNetworks | filter: { $ : $select.search}">
<div ng-bind-html="resource.name + ' - ' + resource.properties.datacentername | highlight: $select.search"></div>
</ui-select-choices>
</ui-select>
参考网址:
走进AngularJs(七) 过滤器(filter)
AngularJS filter:search 是如何匹配的 ng-repeat filter:search
AngularJS filter:search 是如何匹配的 ng-repeat filter:search ,filter:{$:search},只取repeat的item的value 不含label的更多相关文章
- Python: re.compile最短匹配模式,只取双引号内的值\“
用正则表达式匹配某个文本模式 1.只取双引号内的值 2.长短匹配模式对比 贪婪模式: 模式r'\"(.*)\" '的意图是匹配被双引号包含的文本,但是这个表达式中*是贪婪的 ...
- Web.xml中设置Servlet和Filter时的url-pattern匹配规则
一.servlet容器对url的匹配过程: 当一个请求发送到servlet容器的时候,容器先会将请求的url减去当前应用上下文的路径作为servlet的映射url,比如我访问的是http://loca ...
- 四十七.iptables防火墙 filter表控制 扩展匹配 nat表典型应用
1.iptables基本管理 关闭firewalld,开启iptables服务 查看防火墙规则 追加.插入防火墙规则 删除.清空防火墙规则 1.1 关闭firewalld,启动iptables服务 ...
- Python:正则表达式(二):如何使用re.search()返回的匹配对象中的具体内容呢??
在上一篇中讲述了re.seach()会返回一个对象格式的数据,如下:<_sre.SRE_Match object; span=(16, 24), match='${phone}'> 那么问 ...
- AngularJS中angular.min.js:80 Error: [ng:areq] http://errors.angularjs.org/1.2.9/ng/areq
报出来的时候,出现这种错误,是因为在引入控制器的时候没有引入成功,我遇到这个错误是在因为没有将父控制器引入到子控制器中.
- C#中正则表达式只取前N个匹配结果
用Regex.Matches方法可以得到同指定正则表达式对应的所有匹配结果.有时,所有匹配结果可能有成千上万个,考虑到性能效率的因素,只需要取出前N个匹配结果.下面的代码演示了做法: 需求:取字符串中 ...
- filter 死循环(tomcat 启动完成 ,自动执行filter.dofilter,导致tomcat 启动超时) , tomcat 启动和 servers 启动 不同
package com.diancai.interceptor; import java.io.IOException; import javax.servlet.Filter; import jav ...
- dubbo白名单通过filter,spring web通过拦截器或者filter即可
在开发中,有时候需要限制访问的权限,白名单就是一种方法.对于Java Web应用,Spring的拦截器可以拦截Web接口的调用:而对于dubbo接口,Spring的拦截器就不管用了. dubbo提供了 ...
- 'org.springframework.web.filter.CharacterEncodingFilter' is not assignable to 'javax.servlet.Filter,This inspection lets you spot the following problems that might occur in descriptors that are used t
1.jar包导入错误,因为maven下载的原因: 删除这样的包,然后让maven重新下载,问题就会解决
随机推荐
- JavaScript中的两个“0”(翻译)
本文翻译自JavaScript’s two zeros JavaScript has two zeros: −0 and +0. This post explains why that is and ...
- C++ 类的继承三(继承中的构造与析构)
//继承中的构造与析构 #include<iostream> using namespace std; /* 继承中的构造析构调用原则 1.子类对象在创建时会首先调用父类的构造函数 2.父 ...
- 控制反转(Inversion of Control,英文缩写为IoC),另外一个名字叫做依赖注入(Dependency Injection,简称DI)
控制反转(Inversion of Control,英文缩写为IoC),另外一个名字叫做依赖注入(Dependency Injection,简称DI),是一个重要的面向对象编程的法则来削减计算机程序的 ...
- 【UVa】Jump(dp)
http://uva.onlinejudge.org/index.php?option=com_onlinejudge&Itemid=8&page=show_problem&p ...
- 学习:inets
inets模块 MODULE SUMMARY The inets services API. inets:start():启动应用.
- ES插件elasticsearch-mapper-attachments 2.3.4及各个版本正确下载地址
ES版本更新那么快,文档链接你也倒是跟上啊, 插件zip包下载,都是error link...难不成是我网络原因? 下载zip页面报错信息: This XML file does not appear ...
- JSP 页面中用绝对路径显示图片
首先,图片和工程不在一个盘符下.图片也不能放到工程下. 在JSP 文件中 <img src="E:/图片/1.jpg"/> 这样是引不到图片的.因为,JSP页面在引 ...
- IT 运行在云端,而云运行在 Linux 上
导读 IT 正在逐渐迁移到云端.那又是什么驱动了云呢?答案是 Linux. 当连微软的 Azure 都开始拥抱 Linux 时,你就应该知道这一切都已经改变了.不管你接不接受, 云正在接管 IT 已经 ...
- AsyncTask--远程图片获取与本地缓存
对于客户端——服务器端应用,从远程获取图片算是经常要用的一个功能,而图片资源往往会消耗比较大的流量,对应用来说,如果处理不好这个问题,那会让用户很崩溃,不知不觉手机流量就用完了,等用户发现是你的应用消 ...
- Excel 一个工作表进行按行数拆分
1. 如下Excel表,总共有120多行数据,如何将以50行数据为一个工作表进行拆分 Sub ZheFenSheet() Dim r, c, i, WJhangshu, WJshu, bt As Lo ...