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屋！