在selectMatch上的角度ui-bootstrap提前输入回调?


92

我正在使用有角度的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或单击列表时调用的方法,但是我不知道该如何回调。

谢谢 !

Answers:


250

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

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

 $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/


2
谢谢!像魅力一样工作。这可能应该在Typeahead标题下的参考页上正式记录了: angular-ui.github.io/bootstrap
ariestav 2014年

29
是否有人知道那个回调中的$ item $ model $ label对象实际上是什么typeahead-on-select ='onSelect($ item,$ model,$ label)'?
AardVark71 2014年

@Matt,我们可以通过onSelect事件使用$ http进行回发吗?
Pratik Gaikwad 2014年

15
@ AardVark71 $ item $ model $ label这三个属性分别如下。如果绑定具有多个属性的对象的JSON数组,则将在$ item中获得具有所有属性的所选项目。$ model是内置的角度模型,用于存储选定的item.value和$ lable会为您提供选择后显示在文本框中的值。因此在很短的时间内,$ label将等于$ model。希望这可以澄清您的疑问。
Pratik Gaikwad 2014年

16
@ AardVark71更容易解释表达式是否类似于: state.id as state.name for state in states。在这种情况下$itemstate,$模式state.id,并且$labelstate.name
Aximili

10

编辑:此方法不是现在最好的方法。最好像上面答案中所解释的那样使用onSelect回调。

我找到了如何做自己想要的事情。我确实看到有一个typeahead-editable属性,如果将其设置为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);
     });
}

2

以下应该是您的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内,您将获得在建议列表的主数组中传递的整个对象


By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.