selectMatch上的angular ui-bootstrap typeahead回调？

Question

我正在使用角度ui-bootstrap typeahead,我想用它作为一种方法来获取很多选择,所以我需要在selectMatch方法启动时获取所选值但我找不到怎么做在我的控制器中

<div class='container-fluid' ng-controller="TypeaheadCtrl">
<pre>Model: {{selected| json}}</pre>
<input type="text" ng-model="selected" typeahead="state for state in states | filter:$viewValue">

如果我看到所选的值,每按一次键我都会得到更改...

scope.$watch('selected', function(newValue, oldValue) {... });

我知道方法selectMatch是当用户按下回车或点击列表时调用的方法,但我不知道如何对其进行回调...

谢谢 !

Answer 1

现在有更好的方法.添加了一个新的回调方法

在控制器文件中添加以下内容:

 $scope.onSelect = function ($item, $model, $label) {
    $scope.$item = $item;
    $scope.$model = $model;
    $scope.$label = $label;
};

在视图中添加以下内容:

 <input type="text"
        ng-model="selected"
        typeahead="state for state in states | filter:$viewValue"
        typeahead-editable="false"
        typeahead-on-select="onSelect($item, $model, $label)"/>

有关详细信息,请参阅typeahead规范(搜索onSelect).

查看以下网址是否有助于 http://www.techguides.in/how-to-create-autocomplete-using-angularjs-ui/

http://www.techguides.in/how-to-customize-autocomplete-to-display-multiple-columns-using-angularjs-ui-2/

Answer 2

编辑:这个方法现在不是最好的方法.最好使用onSelect回调,如上面的答案中所解释的那样.

我发现如何做我想做的事情.我确实看到有一个类型可编辑的属性,如果它设置为false,那么只有选择了模型中的值时,所选值才会更改.因此$ watch正常工作以检查何时选择新值.

<input type="text" ng-model="selected" typeahead="state for state in states | filter:$viewValue" typeahead-editable="false">

link: function(scope, elm, attrs){
    scope.$watch('selected', function(newValue, oldValue) {
        if (newValue)
          console.log(oldValue+"->"+newValue);
     });
}