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

问题描述 投票:5回答:1

我有一个类似下面的模式,它显示了一个项目列表和一个文本字段,根据'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”中的最新值进行刷新。

javascript html angularjs
1个回答
1
投票

我为这个没有答案道歉,但我没有评论的声誉。我认为问题是你将jquery与角度功能结合起来。你应该看看uibModal(https://angular-ui.github.io/bootstrap/)并尝试从角度内的jquery版本中脱身。我过去曾经遇到过像Angular摘要这样的问题。

基本上,您可以创建一个模态组件/控制器,它将生活在角度世界中,并且更加无缝地适合您的应用程序。它还确保每次打开模型时,控制器都会使用参数重置,并且应该正确显示。

如果这不可行,你应该看看$ apply https://docs.angularjs.org/api/ng/type/ $ rootScope.Scope#$ apply将你的jquery激活的代码带入角度。

© www.soinside.com 2019 - 2024. All rights reserved.