Почему пользовательский интерфейс не очищается при выборе каждый второй раз?

В ui-select, когда я выбираю опцию, обратный вызов on-select срабатывает, но опция не очищается каждый второй раз.

Выбор пользовательского интерфейса имеет 2 состояния:

  1. Кнопка - когда я на самом деле не нажимаю ее
  2. Ввод - когда я нажимаю на него, и он позволяет мне искать

Когда он начинается, на кнопке есть мой текст-заполнитель "Поиск...". Я нажимаю на нее, начинаю поиск, он выводит список, я выбираю один вариант, on-select срабатывает, в котором я очищаю ng-model.

Тем не менее, каждый второй выбор, который я делаю, игнорирует ng-model в моем обратном вызове.

<ui-select ng-model="result.selected" theme="bootstrap" class="search" on-select="searchselect($item)" reset-search-input="true" on-select="selected($item)">
    <ui-select-match placeholder="Search...">{{$select.selected.name}}</ui-select-match>
    <ui-select-choices refresh="search({val:$select.search})" refresh-delay="300" repeat="item in results">
        <div ng-bind="item.name"></div>
    </ui-select-choices>
</ui-select>

Вот мой код on-select:

  $scope.selected = function(item) {
     $scope.picked = item;
     $scope.result.selected = "";
  };

Я изменил базовый ui-select пример plunkr, чтобы воспроизвести его: ?p=предварительный просмотр

  1. Нажмите на выбор
  2. Поиск по тексту, я считаю, что "123" проще всего
  3. Выберите вариант
  4. Убедитесь, что ng-model очищено
  5. Искать повторно
  6. Выберите другой вариант или тот же самый
  7. Смотрите, чтобы ng-model не очищалось

Вот изображения.

Исходный:

Исходный

Во время поиска:

Выбрать

После выбора (каждый второй) - это моя проблема

После выбора ПРОБЛЕМА

Почему он не очищается на последнем изображении кнопки после каждого второго выбора?


angularjs angular-ui ui-select
person deitch    schedule 10.12.2014    source источник

Ответы (1)


arrow_upward
0
arrow_downward

поздно, но, возможно, это помогает: я думаю, это как-то связано с неправильной реализацией цикла angular-digest в ui-select. См. жизненный цикл области документации angular.

Итак, что вы можете сделать с этим:

  • Оберните все изменения в области, которые вы делаете в выбранном обратном вызове, в $ timeout, поскольку angular автоматически оборачивает все там в безопасный цикл дайджеста. Пример:

    $scope.selected = function(item) {
  $timeout(function(){
    $scope.picked = item;
    $scope.result.selected = "";
  }); 
};

  • Используйте выражение $watch вместо функции обратного вызова:

    $scope.$watch('result.selected', function(newVal){
  if(newVal !== ''){
    $scope.picked = newVal;
    $scope.result.selected = '';
  }
});

Я предполагаю, что последний более эффективен, поскольку он не запускает полный цикл дайджеста. (но я не эксперт по угловым внутренностям.)

person ulilicht    schedule 04.02.2015
comment
В итоге я потратил слишком много времени на это, и я думаю (но не уверен), что вы правы в отношении причин. В итоге я исправил это, наложив на него свою собственную директиву. См. github.com/angular-ui/ui-select/issues/502 - person deitch; 04.02.2015