javascript - 模态搜索过滤器不会清除 ng-repeat 列表，以前的结果仍然存在

Question

我有一个如下所示的模式，它显示了一个项目列表和一个文本字段，该文本字段根据“tmc.macrofilterpattern”中的值过滤列表“tmc.userMacrosListFiltered”中的项目。

<div id="listmodal" class="modal fade" role="dialog">
    <div class="modal-dialog" style="width: 350px;">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body" style=" height: 400px; width: 350px;overflow:scroll;">
                    <div id="macrolist" class="list-group" tabindex="0" >
                        <input type="text" id="filterby" class="form-control list-group-item" autocomplete="off" placeholder="type macro title here.." ng-model="tmc.macrofilterpattern" />
                        <a href="" class="list-group-item " ng-click="tmc.selectedMacro(item.macroTitle)" 
                        ng-repeat="item in tmc.userMacrosListFiltered" ng-if="item.macroTitle.toLowerCase().includes(tmc.macrofilterpattern.toLowerCase())">
                            {{item.macroTitle}}
                        </a>
                    </div>
            </div>
        </div>
    </div>
</div>

当我关闭模式时，我想清除列表和过滤文本。我正在清除它，如下所示，

$('#listmodal').on('hidden.bs.modal', function(){
    $('#macrolist').find('.active').removeClass('active');
    tmc.macrofilterpattern = "";
    tmc.userMacrosListFiltered = {};
});

在打开模式的给定触发器上，我正在用最新值填充 tmc.userMacrosListFiltered 列表，并假设显示为模式上的项目列表。该列表正在使用最新值进行更新，但是，模态显示以前的值一段时间(5-10 秒)并使用“tmc.userMacrosListFiltered”中的最新值进行刷新。

Answer 1

对于这个未回答的问题，我深表歉意，但我没有发表评论的名誉。我认为问题是你将 jquery 与 Angular 功能结合起来。你应该看看 uibModal ( https://angular-ui.github.io/bootstrap/ ) 并尝试在 angular 中摆脱 jquery 版本。过去，我在像这样使用 Angular 摘要做事时遇到过一些问题。

从本质上讲，您可以创建一个模态组件/ Controller ，它将存在于 Angular 世界中并更无缝地融入您的应用程序。它还确保每次打开模型时，您的 Controller 都会使用参数重置并且应该正确显示。

如果那不可行，您应该看看 $apply https://docs.angularjs.org/api/ng/type/ $rootScope.Scope#$apply 将您的 jquery 触发代码转换为 Angular 。