如何从更改事件上的 ui-select 获取搜索值

Question

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

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

Answer 1

我能够通过向ui-select-choices添加refresh和refresh-delay来解决问题

// 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>