angularjs下拉列表中的自定义过滤器
angularjs custom filter in drop-down list
我有ul li
元素,这里写的是用户列表。我有一个输入,用户可以在其中编写和过滤用户列表。并且该ul元素在默认情况下是隐藏的。在关注输入之后,我显示了这个ul元素,在模糊上,我隐藏了这个ul。
<input type="text" autocomplete="off" ng-model="checkData[key]" />
<ul>
<li ng-repeat="user in users | identification:checkData[key]">{{user}}</li>
</ul>
我的过滤器:
return (items: Array<string|number>, value: string|number) =>
{
if(typeof items !== 'undefined')
{
var filtered: Array<string|number> = [];
for(var i: number = 0, length: number = items.length; i < length; i++)
{
var element: string|number = items[i];
if((((element + '').indexOf(value + '') === 0) && element !== value) || typeof value === 'undefined')
{
filtered.push(element);
}
}
return filtered;
}
}
这个效果很好,但我有一个问题。当用户在输入中输入一些值时,ul元素中的用户列表将被过滤。
因此,当用户再次关注输入时,ul中显示过滤后的数据。我想对每一个焦点,显示完整的列表,不删除输入值。
如何实现这一点?
您可以通过向filter方法传递一个参数来禁用聚焦过滤器,方法如下:
<ul>
<li ng-repeat="user in users | identification:checkData[key]:isEnabled" ng-focus="isEnabled = false;">{{user}}</li>
</ul>
修改您的过滤器:
return (items: Array<string|number>, value: string|number, isEnabled: boolean) =>
{
if (!isEnabled) {
return items; // Return the unfiltered list ...
}
if(typeof items !== 'undefined')
{
var filtered: Array<string|number> = [];
for(var i: number = 0, length: number = items.length; i < length; i++)
{
var element: string|number = items[i];
if((((element + '').indexOf(value + '') === 0) && element !== value) || typeof value === 'undefined')
{
filtered.push(element);
}
}
return filtered;
}
}
这样就可以了。试试这个。
<input type="text" autocomplete="off" ng-model="checkData[key]" ng-focus="filterKey[key] = ''" ng-blur="filterKey[key] = checkData[key]"/>
<!-- hidden field to save search text -->
<input type="hidden" ng-model="filterKey[key]"/>
<ul>
<li ng-repeat="user in users | identification:filterKey[key]">{{user}}</li>
</ul>
相关文章:
- 如何在angular.js中动态应用自定义过滤器
- AngularJS自定义过滤器未触发点击事件
- Vue.js如何在定义API变量之前实现自定义过滤器
- 用于分页的 AngularJS 自定义过滤器
- 为什么我的自定义过滤器会导致无限消化
- 如何仅在文本字段中有值时才将自定义过滤器应用于 ng-repeat
- 指令中的 AngularJS 自定义过滤器以格式化值
- Angular自定义过滤器在处理某些匹配时注销,但会过滤掉所有结果
- Angular js自定义过滤器未定义
- AngularJS自定义过滤器调用了两次,并在第二次调用时删除输入数据
- 自定义过滤器的问题,我缺少什么
- 如何在Angular 1.3.6上创建一个自定义过滤器来搜索嵌套数组
- json数组angularjs中的自定义过滤器
- 两个日期之间的自定义过滤器 AngularJS
- PG-promise为选择查询创建自定义过滤器
- 角度.js. 如何计算满足自定义过滤器的 ng 重复迭代
- Angular JS“Startswith”自定义过滤器
- 无法让 Angular 自定义过滤器工作
- AngularJS自定义过滤器被调用两次
- 如何使用 Angularjs 创建自定义过滤器