web-dev-qa-db-ja.com

Angular-UI typeahead：ラベルを表示しますが、値のみにバインドします

私は次の方法で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" />

次のようなモデルにバインドされます：

var options = [
    {"value": 1, "text": "value1"},
    {"value": 2, "text": "value2"},
    ...
];

オプションテキストは正しく表示されますが、アイテムを選択すると、テキストボックス内に値が表示されます。モデルは（モデルオブジェクト全体ではなく）値のみに正しくバインドされます。

選択後にテキストボックス内に「テキスト」（「値」ではなく）を表示することは可能ですか？モデルのバインディングを値のみに維持します（つまり、特定の「テキスト」を選択すると、モデルは「値」で更新されます）？

angularjsangular-uiangular-ui-typeahead
51
Matteo Piazza

理想的ではありませんが、typeahead-input-formatter属性は、修正が提供されるまで回避策を提供します。 （ Plunker from github thread）。

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;
     }
   }
};
49
krimhorn

からコードを変更してみてください

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

提案どおりに試すことができますが、そのようなタイプアヘッドオンセレクト

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

これにより、テキストまたはラベルは表示されますが、基になる値は変更されます。

10
domenicr

ここで、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"
  >
3
Simon Fakir

さて、これまでのところ、ディレクティブを介して可能な解決策を見つけました。

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

まあ...明らかにこれは単なるトリックです...コードを変更したりディレクティブを使用したりせずに、よりクリーンで自然な方法があるかどうかを知りたいです...

1
Matteo Piazza

私にとってこれ：

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}}で印刷できるモデルのようなものになりました

0
Gio Venice