ng-change正在监视ng-repeat中的所有项目,而不是一项

时间:2018-07-09 20:42:23

标签: javascript angularjs angularjs-ng-repeat

我有这个模板:

<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;
            });
        }
    });
};

更改搜索值的结果显示在随附的图片上。

enter image description here

更改输入值时,该函数将触发,但是会在ng-repeat中的每个项目中进行搜索。如何处理一个当前项目,而又不影响ng-repeat中的所有其他项目? 这意味着,当我更改一项中的搜索值时,它不应处理其他项。 我尝试动态创建唯一的ng模型,但这没有帮助。 AngularJS版本是1.2.27

0 个答案:

没有答案