Angular-UI typeahead:显示标签但仅绑定到值 [英] Angular-UI typeahead: show label but bind to value only
问题描述
我通过以下方式使用 Angular-UI 预先输入:
I am using Angular-UI typeahead in the following way:
<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"},
...
];
它正确地显示了选项文本,但是当我选择一个项目时,它会在文本框中显示值.模型仅正确绑定到值(而不是整个模型对象).
It correctly shows options text, but when I select an item it shows inside the textbox the value. The model is correctly bounded to the value only (not the entire model object).
是否可以在选择后在文本框中显示文本"(而不是值"),并且仍然保持模型绑定到仅值(即:当我选择某个文本"时,模型会更新为价值")?
Is it possible to show inside the textbox the "text" (not the "value") after selection, still maintaining model binding to just the value (ie: when I select a certain "text" the model is updated with the "value")?
推荐答案
这并不理想,但 typeahead-input-formatter 属性提供了一种变通方法,直到可以提供修复为止.(Plunker 来自 github 线程).
It's not ideal, but the typeahead-input-formatter attribute provides a work-around until a fix can be provided. (Plunker from github thread).
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 控制器功能:
AngularJs controller 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;
}
}
};
这篇关于Angular-UI typeahead:显示标签但仅绑定到值的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!