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}}打印它们
