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
45
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:
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
28
Try changing your code from
试着改变你的代码。
typeahead="o.value as o.text for o in options | filter:$viewValue | limitTo:5"
to
来
typeahead="o as o.text for o in options | filter:$viewValue | limitTo:5"
#3
10
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
3
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
1
Well, so far I found a possible solution through directives.
到目前为止,我通过指令找到了一种可能的解决方案。
HTML
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
0
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
45
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:
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
28
Try changing your code from
试着改变你的代码。
typeahead="o.value as o.text for o in options | filter:$viewValue | limitTo:5"
to
来
typeahead="o as o.text for o in options | filter:$viewValue | limitTo:5"
#3
10
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
3
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
1
Well, so far I found a possible solution through directives.
到目前为止,我通过指令找到了一种可能的解决方案。
HTML
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
0
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}来打印它们