95

我正在使用 angular 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 是当用户按 Enter 或单击列表时调用的方法，但我不知道如何对此进行回调...

谢谢 ！

4

4 回答 4

255

现在有更好的方法来做到这一点。添加了一个新的回调方法

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

 $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）。

检查以下 URL 是否有帮助 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/

于 2013-08-01T12:51:46.823 回答
10

编辑：这种方法现在不是最好的。最好使用 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);
     });
}
于 2013-04-22T07:55:23.817 回答
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 中，您将获得在建议列表的主数组中传递的整个对象

于 2016-02-13T17:54:04.087 回答
0

在验证之前尝试以下操作

 modelCtrl.$setValidity('editable', true);
于 2015-06-21T14:38:52.483 回答