![](/img/trans.png)
[英]angularjs filter drop-down list according to selected values in other drop-down lists
[英]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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.