Angular-UI typeahead:显示标签,但只绑定到值

我正在用以下方式使用Angular-UI typehead:

<input type="text" ng-model="myModel" typeahead="o.value as o.text for o in options | filter:$viewValue | limitTo:5" typeahead-editable="false" /> 

绑定到一个模型,如:

 var options = [ {"value": 1, "text": "value1"}, {"value": 2, "text": "value2"}, ... ]; 

它正确地显示选项文本,但是当我select一个项目时,它显示文本框内的值。 该模型正确地绑定到值(而不是整个模型对象)。

是否可以在select之后在文本框内显示“文本”(而不是“值”),仍然保持模型绑定到值(即:当我select某个“文本”时,模型用“值” )?

这并不理想,但typeahead-input-formatter属性提供了一个解决方法,直到可以提供修复。 (从github线程的Plunker )。

HTML:

 <input type="text" ng-model="myModel" typeahead="o.value as o.text for o in options | filter:$viewValue | limitTo:5" typeahead-editable="false" typeahead-input-formatter="formatLabel($model)" /> 

AngularJs控制器function:

 $scope.formatLabel = function(model) { for (var i=0; i< $scope.options.length; i++) { if (model === $scope.options[i].value) { return $scope.options[i].text; } } }; 

尝试改变你的代码

 typeahead="o.value as o.text for o in options | filter:$viewValue | limitTo:5" 

 typeahead="o as o.text for o in options | filter:$viewValue | limitTo:5" 

你可以尝试按照build议做,但是像这样selecttypes

 <input type="text" ng-model="myModel" typeahead="o as o.text for o in options | filter:$viewValue | limitTo:5" typeahead-editable="false" typeahead-on-select="model=$item.value" /> 

这将确保文本或标签显示,但底层的价值被改变。

这里使用lodash或者下划线的每个人的简写格式:

 function formatTypehead(array,id){ var o = _.find(array,{id:id}); return (o?o.displayName || id:id); } 

和html:

 <input type="text" uib-typeahead="s.id as s.displayName for s in companies | filter:$viewValue | limitTo:8" typeahead-input-formatter="formatTypehead(companies, $model)" ng-model="model.company" > 

那么到目前为止,我通过指令find了一个可能的解决scheme。

HTML

 <div my-autocomplete my-autocomplete-source="element" my-autocomplete-model="obj[element.model]"></div> 

指示

 app.directive('myAutocomplete', function() { return { restrict: 'A', replace: true, template: '<input type="text" name="{{myAutocompleteSource.model}}" placeholder="{{myAutocompleteSource.label}}" ng-model="selected" typeahead="o as o.text for o in myAutocompleteSource.options | filter:$viewValue | limitTo:5" typeahead-editable="false" />', scope: { myAutocompleteSource: '=', myAutocompleteModel: '=' }, controller: function($scope) { $scope.selected = null; $scope.$watch('selected', function() { $scope.myAutocompleteModel = ($scope.selected && 'value' in $scope.selected) ? $scope.selected.value : null; }); } }; }); 

那么…显然这只是一个把戏…我想知道是否有一个更清洁,更自然的方式来做到这一点…没有修改代码或使用指令…

对我来说这个:

 uib-typeahead="o as o.RagioneSociale for o in main.getLocation($viewValue)" 

代替:

 typeahead="o as o.RagioneSociale for o in main.getLocation($viewValue)" 

真的很有用

我有一个像这样的json:

 [{"RagioneSociale":"Politi Real Estate sas","IDAnagrafica":"2516"},{"RagioneSociale":"COND METROPOLITAN","IDAnagrafica":"4325"}] Model: {{asyncSelected | json}} <input type="text" ng-model="asyncSelected" uib-typeahead="o as o.RagioneSociale for o in main.getLocation($viewValue)" typeahead-loading="loadingLocations" typeahead-no-results="noResults" class="form-control"> 

并最终成为像只有RagioneSociale价值的下拉菜单和一个模型,我可以看到文本和id,并用普通{{asyncSelected}}打印它们