Как получить значение поиска из ui-select при изменении события - PullRequest
Новая
       12

Как получить значение поиска из ui-select при изменении события

0 голосов
/ 14 сентября 2018

Я пытаюсь перехватить и вызвать функцию для поискового значения элемента ui-select. В частности, я хочу получить значение элемента ui-select-match при каждом нажатии клавиши.

В обычном input элементе я мог бы сделать что-то вроде этого: 

// controller
class selectController {
  constructor($scope) {
    this.$scope = $scope;
    this.query = '';
    this.numChars = 0;

  countChars(q) {
    this.query = q;
    this.numChars = q.length;
  }
}

// template
<input ng-model="q" ng-change="ctrl.countChars(q)">...</input>

Однако, используя угловой ui-select, я не могу зафиксировать входное значение поиска для события onchange.

например: 

// controller
class selectController {
  constructor($scope) {
    this.$scope = $scope;
    this.query = '';
    this.numChars = 0;
    this.advisor = {};
    this.advisors = [
      { name: 'Cheryl Aubuchon' },
      { name: 'Jerome Brown' },
      { name: 'John Doe' },
      { name: 'Jane Doe' },
      { name: 'Deborah Grimm' },
      { name: 'Tommy Harris' },
      { name: 'Sally Smith' },
      { name: 'Harry Velez' },
      { name: 'Chelsie Williamson' }
    ];
  }

  countChars(q) {
    this.query = q;
    this.numChars = q.length;
  }
}

// template
<p ng-bind="ctrl.query"></p>

<ui-select ng-model="ctrl.advisor.selected">
    <ui-select-match allow-clear placeholder="Select an Advisor" class="ui-select-match" ng-model="q" ng-change="ctrl.countChars(q)">
        <span ng-bind="$select.selected.name"></span>
    </ui-select-match>
    <ui-select-choices class="ui-select-choices" repeat="advisor in (ctrl.advisors | filter: $select.search)">
        <span ng-bind="advisor.name"></span>
    </ui-select-choices>
</ui-select>

Как я могу получить поисковый запрос, когда пользователь печатает его, и что-то делать с ним в контроллере?

1 Ответ

0 голосов
/ 14 сентября 2018

Мне удалось решить проблему, добавив refresh и refresh-delay к ui-select-choices

// controller
class selectController {
  constructor($scope) {
    this.$scope = $scope;
    this.query = '';
    this.numChars = 0;
    this.advisor = {};
    this.advisors = [
      { name: 'Cheryl Aubuchon' },
      { name: 'Jerome Brown' },
      { name: 'John Doe' },
      { name: 'Jane Doe' },
      { name: 'Deborah Grimm' },
      { name: 'Tommy Harris' },
      { name: 'Sally Smith' },
      { name: 'Harry Velez' },
      { name: 'Chelsie Williamson' }
    ];
  }

  countChars(q) {
    this.query = q;
    this.numChars = q.length;
  }
}

// template
<p ng-bind="ctrl.query"></p>

<ui-select ng-model="ctrl.advisor.selected">
    <ui-select-match allow-clear placeholder="Select an Advisor" class="ui-select-match">
        <span ng-bind="$select.selected.name"></span>
    </ui-select-match>
    <ui-select-choices class="ui-select-choices" repeat="advisor in (ctrl.advisors | filter: $select.search)" refresh="ctrl.countChars($select.search)" refresh-delay="0">
        <span ng-bind="advisor.name"></span>
    </ui-select-choices>
</ui-select>
...