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

现在有更好的方法。 A new callback method has been added

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

 $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 spec（搜索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);
     });
}

Answer 3

以下应该是您的HTML

 <input id="title" type="text"  ng-model="title"  typeahead="data.enquiry_title for data in titleData | filter:$viewValue | limitTo:8" 
typeahead-on-select='onSelect($item, $model, $label)' />

只需使用回调函数在输入标记中添加 typeahead-on-select 。

以下内容将进入控制器

$scope.onSelect = function ($item, $model, $label) {
            console.log($item);
            if($item.tid)
                $scope.activeTitleId = $item.tid
        };

<$>在$ item中，您将获得您在建议列表主数组中传递的整个对象

Answer 4

在验证前尝试以下操作

 modelCtrl.$setValidity('editable', true);

selectMatch上的angular ui-bootstrap typeahead回调？

4 个答案: