Question

我有一个带有复选框的列表，可以使用文本框作为搜索字段进行过滤

<input type="search" id="valSearch" value="" placeholder="Please type name..." class="search-input" ng-model="query">  
<ul class="list">
    <li class="list__item list__item--tappable" ng-repeat="name in classList | filter:query">  
         <label class="checkbox checkbox--list-item">  
             <input type="checkbox" class="chkProperty" value="{{id.childName}}">  
                {{id.childName}}  
        </label>  
     </li>  
</ul>

我遇到的问题是，如果选中了一个复选框，然后进行搜索，一旦清除了搜索字段并显示整个列表，选中的复选框如果被隐藏则返回时不会保持选中状态在搜索过程中。我尝试使用jquery在返回时检查框，如下所示

$('#valSearch').on('keypress', function () {
        setTimeout(function () {                    
            $.each($(".chkProperty"), function (i, e) {
                if (nameList[i] == e.value) { //nameList is an array that contains all the selected items
                    $(this).attr("checked", true);
                }
            });
        }, 1000);
    });

Answer 1

ng-repeat将在过滤器未返回项目时删除DOM及其所有引用。因此，如果项目被选中，则不再检查它何时被重新插入DOM，因为它是一个全新的DOM（而不是旧的DOM）。

要解决此问题，您需要让数据（nameList）保持state of the item（已选中/未选中）。这样每个输入都可以查看是否在ng-repeat内进行了检查。要执行此操作，只需让输入使用ng-model。

plunker example

如果AngularJS复选框被过滤掉然后返回，则不会保持选中状态

1 个答案: