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

I am using Angular-UI typeahead in the following way:

我用的是Angular-UI预排:

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

binded to a model like:

绑定到一个模型，比如:

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")?

是否有可能在文本框中显示“文本”(而不是“值”)，仍然保持模型绑定到值(例如:当我选择一个特定的“文本”时，模型被更新为“值”)?

6 个解决方案

#1

It's not ideal, but the typeahead-input-formatter attribute provides a work-around until a fix can be provided. (Plunker from github thread).

这并不理想，但是typeahead-input-formatter属性提供了一个解决方案，直到能够提供修复。(恰好从github线程)。

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 controller function:

AngularJs控制器功能:

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

#2

Try changing your code from

试着改变你的代码。

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"

#3

You can try doing as suggested but with typeahead-on-select like so

你可以试着按建议去做，但是用“输入-选择”

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

This will ensure that the text or label is displayed but underlying value is changed.

这将确保显示文本或标签，但更改底层值。

#4

Here a shorthand formatter for everybody who uses lodash or underscore:

这里是每个使用lodash或下划线的人的速记格式:

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

and html:

和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"
  >

#5

Well, so far I found a possible solution through directives.

到目前为止，我通过指令找到了一种可能的解决方案。

HTML

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

DIRECTIVE

指令

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; 
            });
        }
    };  
});

Well... obviously this is only a trick... I would like to know if is there a cleaner, more natural way to do it... without modifying code or using directive...

嗯…显然，这只是一个诡计……我想知道是否有一种更干净、更自然的方法来做这件事……无需修改代码或使用指令…

#6

for me this:

对我来说:

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

instead of:

而不是:

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

was really usefull

真的很有用

i had a json made like this:

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">

and it ended up in something like having the dropdown menu with just the RagioneSociale value and a model where i can see both the text and the id and print them with a normal {{asyncSelected}}

最后它就像使用RagioneSociale值的下拉菜单那样我可以看到文本和id并用一个普通的{{asyncSelected}来打印它们

#1