在selectMatch上有角ui-bootstrap类型的回调吗?

I'm using the angular ui-bootstrap typeahead and I would want to use it as a way to pick up many choices, so I'd need to get the selected value when selectMatch method is launched but I can't find how to do that in my controller

我用的是角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">

If I watch the selected value, I got the change every time a key is pressed...

如果我查看所选的值，每次按下一个键时我都会得到更改……

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

I got that the method selectMatch is the one which is called when the user press enter or click on the list but I don't know how to have a callback on that...

我知道方法selectMatch是用户按下enter或单击列表时调用的，但我不知道如何对它进行回调……

Thanks !

谢谢!

4 个解决方案

#1

236

There is better way of doing this now. A new callback method has been added

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

In controller file add the following:

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

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

In view add the following:

有兴趣增加以下内容:

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

See the typeahead spec for more information (search for onSelect).

有关更多信息，请参阅typeahead规范(搜索onSelect)。

Check out if the following URLs helps http://www.techguides.in/how-to-create-autocomplete-using-angularjs-ui/

查看以下url是否有助于http://www.techguides.in/how- create-autocomplete- use -angularjs-ui/

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

#2

Edit: this method is not the best one now. It's better to use onSelect callback like explained in the answer above this one.

编辑:这个方法现在不是最好的。最好使用onSelect回调，比如在上面的答案中解释。

I found how how do to do what I wanted. I did see that there is a typeahead-editable attribute and if it's set to false then the selected value change only when a value from the model is selected. And so the $watch is working fine to check when a new value is selected.

我找到了如何做我想做的事。我确实看到了一个typeahead可编辑的属性，如果它被设置为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);
     });
}

#3

Following should be your HTML

下面应该是您的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)' />

just add typeahead-on-select in input tag with the callback function.

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

Following would go inside controller

跟随会进入控制器

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

inside $item you'll get the whole object which you have passed in the main array of suggestion list

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

#4

try the following before validation

在验证之前尝试以下操作

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

#1

236