在选择匹配的角度UI的自举预输入回调?(angular ui-bootstrap typeahead

2019-08-31 14:25发布

我使用的角度UI的自举预输入,我想用它作为一种回暖很多选择,所以我需要的时候选择匹配方法推出来获得所选择的价值,但我找不到怎么办在我的控制器

<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) {... });

我的方法选择匹配是当用户按回车键或单击列表上,但我不知道怎么对一个回调这就是所谓的一个...

谢谢 !

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

查看预输入规范的详细信息(搜索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,那么。 这样一来,$表工作正常,当选择一个新的值来检查。

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

只需添加预输入上,选择输入标签与回调函数。

下面就往里走控制器

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

$项目里面,你会得到你的建议名单的主阵列中已通过整个对象



Answer 4:

尝试验证前,以下

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


文章来源: angular ui-bootstrap typeahead callback on selectMatch?