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

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