Модальный поисковый фильтр не очищает список повторений ng, предыдущие результаты сохраняются - PullRequest
5 голосов
/ 11 апреля 2019

У меня есть модал, подобный приведенному ниже, который показывает список элементов и текстовое поле, которое фильтрует элементы в списке 'tmc.userMacrosListFiltered' в соответствии со значением в 'tmc.macrofilterpattern'.

<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».

1 Ответ

1 голос
/ 11 апреля 2019

Я прошу прощения за этот не ответ, но у меня нет репутации, чтобы просто комментировать. Я думаю, проблема в том, что вы комбинируете jquery с угловой функциональностью. Вы должны взглянуть на uibModal (https://angular -ui.github.io / bootstrap / ) и попытаться уйти от версии jquery в angular. В прошлом у меня были некоторые проблемы, когда я делал подобные вещи из англоязычного дайджеста.

По сути, вы можете создать модальный компонент / контроллер, который будет жить в мире углов и более органично вписываться в ваше приложение. Это также гарантирует, что каждый раз, когда вы открываете свою модель, ваш контроллер сбрасывается с параметрами и должен отображаться правильно.

Если это не выполнимо, вам нужно взглянуть на $ apply https://docs.angularjs.org/api/ng/type/$rootScope.Scope#$apply, чтобы перевести код, запущенный с помощью jquery, в угол.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...