我有这个模板:
<div class=characteristics-list>
<input ng-model="search" ng-change="onSearchChange(search)">
<div ng-repeat="policy in item.policies" ng-include="'policy.html'"></div>
</div>
以及控制器内部的此逻辑:
$scope.onSearchChange = function (originalValue) {
var value = originalValue.toLowerCase();
if (!value) {
$scope.item.policies.forEach(function (policy) {
policy.isCollapsed = true;
policy.isHidden = false;
policy.items.forEach(function (item) {
item.isHidden = false;
});
});
return;
}
$scope.item.policies.forEach(function (policy) {
var isValueInPolicyName = policy.name.toLowerCase().includes(value);
var visibleItems = policy.items.filter(function (item) {
var isValueInDescription = item.description.toLowerCase().includes(value);
item.isHidden = !isValueInDescription;
return isValueInDescription;
});
policy.isHidden = !isValueInPolicyName && !visibleItems.length;
if (!isValueInPolicyName && !!visibleItems.length) {
policy.isCollapsed = false;
}
if (isValueInPolicyName && !visibleItems.length) {
policy.items.forEach(function (item) {
item.isHidden = false;
});
}
});
};
更改搜索值的结果显示在随附的图片上。
更改输入值时,该函数将触发,但是会在ng-repeat中的每个项目中进行搜索。如何处理一个当前项目,而又不影响ng-repeat中的所有其他项目? 这意味着,当我更改一项中的搜索值时,它不应处理其他项。 我尝试动态创建唯一的ng模型,但这没有帮助。 AngularJS版本是1.2.27