在 selectMatch 上角度 ui-bootstrap 字头回调？

我使用的是角形 ui-bootstrap 类型头，我想用它来选择很多选项，所以当 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 方法是当用户按下输入键或单击列表时调用的方法，但我不知道如何对该方法进行回调..。

谢谢！

92274 次浏览
小开

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

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.

<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);
});
}
小开
最佳答案

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).

Check out if the following URLs helps 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/

小开

try the following before validation

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

Following should be your 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.

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


提交答案