我正在以下列方式使用Angular-UI typeahead:
<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"},
...
];
它正确显示了选项文本,但是当我选择一个项目时,它会在文本框中显示该值。模型仅正确限定为值(不是整个模型对象)。
是否有可能在选择后在文本框内显示“文本”(而不是“值”),仍然只保持模型绑定到值(即:当我选择某个“文本”时,模型会更新为“值”)?
答案 0 :(得分:49)
它并不理想,但是typeahead-input-formatter属性提供了一种解决方法,直到可以提供修复。 (来自Plunker帖子的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控制器功能:
$scope.formatLabel = function(model) {
for (var i=0; i< $scope.options.length; i++) {
if (model === $scope.options[i].value) {
return $scope.options[i].text;
}
}
};
答案 1 :(得分:28)
尝试从
更改代码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"
答案 2 :(得分:10)
您可以尝试按照建议进行操作,但使用typeahead-on-select就像这样
<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"
/>
这将确保显示文本或标签,但更改基础值。
答案 3 :(得分:3)
这里是使用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"
>
答案 4 :(得分:1)
好吧,到目前为止,我通过指令找到了一个可能的解决方案。
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;
});
}
};
});
嗯......显然这只是一个技巧......我想知道是否有更清洁,更自然的方式来做...不修改代码或使用指令......
答案 5 :(得分:0)
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值的下拉菜单 和一个模型,我可以看到文本和身份证,并用正常{{asyncSelected}}打印它们