如何在更改事件中从 ui-select 获取搜索值答案

【问题标题】：How to get search value from ui-select on change event如何在更改事件中从 ui-select 获取搜索值
【发布时间】：2018-09-14 22:16:18
【问题描述】：

我正在尝试捕获并调用 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>

如何在用户键入时捕获搜索查询并在控制器中对其进行处理？

【问题讨论】：

angular 和 ui-select 的版本？

标签： javascript angularjs ui-select

【解决方案1】：

我可以通过将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>

【讨论】：