52

我通过以下方式使用 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"},
    ...
];

它正确显示选项文本，但是当我选择一个项目时，它会在文本框中显示值。模型仅与值正确绑定（而不是整个模型对象）。

是否可以在选择后在文本框中显示“文本”（不是“值”），仍然保持模型绑定到值（即：当我选择某个“文本”时，模型会更新为“值” )?

4

6 回答 6

51

这并不理想，但 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 控制器功能： 

$scope.formatLabel = function(model) {
   for (var i=0; i< $scope.options.length; i++) {
     if (model === $scope.options[i].value) {
       return $scope.options[i].text;
     }
   }
};
于 2014-02-27T20:02:14.550 回答
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"
于 2014-02-26T09:56:18.560 回答
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"
/>

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

于 2015-02-26T19:38:52.353 回答
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"
  >
于 2016-08-12T14:53:44.647 回答
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; 
            });
        }
    };  
});

嗯......显然这只是一个技巧......我想知道是否有更清洁，更自然的方式来做到这一点......无需修改代码或使用指令......

于 2013-10-30T13:56:56.443 回答
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 值的下拉菜单和一个模型，我可以在其中看到文本和 id 并使用普通 {{asyncSelected}} 打印它们

于 2016-10-24T23:01:54.843 回答