Sudut-UI typeahead: menampilkan label tapi mengikat nilai hanya

Saya menggunakan Sudut-UI typeahead dengan cara sebagai berikut:

<input type="text" ng-model="myModel" typeahead="o.value as o.text for o in options | filter:$viewValue | limitTo:5" typeahead-editable="false" />

binded untuk model seperti:

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

Itu benar menunjukkan pilihan teks, tetapi ketika saya memilih sebuah item itu menunjukkan di dalam textbox nilai. Model ini benar dibatasi untuk nilai saja (tidak seluruh model objek).

Adalah mungkin untuk menunjukkan di dalam textbox "text" (bukan "nilai") setelah seleksi, masih mempertahankan model mengikat hanya nilai (yaitu: ketika saya pilih tertentu "text" model ini diperbarui dengan "nilai")?

Cœur
Pertanyaan edit 19 Agustus 2017 в 1:41
Pemrograman
angularjs angular-ui angular-ui-typeahead
30 Oktober 2013 в 11:10
34 tayangan
Mengomentari pertanyaan (1)

It's tidak ideal, tapi typeahead-input-formatter atribut menyediakan pekerjaan-sekitar sampai perbaikan dapat diberikan. (Plunker dari 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 controller fungsi:

$scope.formatLabel = function(model) {
   for (var i=0; i< $scope.options.length; i++) {
     if (model === $scope.options[i].value) {
       return $scope.options[i].text;
     }
   }
};
islandlinux
Jawaban edit 20 Februari 2017 в 8:58
Komentar (7)

Cobalah mengubah kode dari

typeahead="o.value as o.text for o in options | filter:$viewValue | limitTo:5"

untuk 

typeahead="o as o.text for o in options | filter:$viewValue | limitTo:5"
ConcurrentHashMap
Jawaban edit 22 Juli 2014 в 11:12
Komentar (4)

Anda dapat mencoba melakukan seperti yang disarankan, tapi dengan typeahead-di-pilih seperti

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

Ini akan memastikan bahwa teks atau label yang ditampilkan tetapi nilai yang mendasari berubah.

islandlinux
Jawaban edit 20 Februari 2017 в 9:22
Komentar (2)

Di sini singkatan formatter untuk semua orang yang menggunakan lodash atau garis bawah:

function formatTypehead(array,id){
  var o = _.find(array,{id:id});
  return (o?o.displayName || id:id);
}

dan 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"
  >
Komentar (0)

Yah, sejauh ini saya menemukan sebuah solusi yang mungkin melalui arahan.

HTML

<div my-autocomplete my-autocomplete-source="element" my-autocomplete-model="obj[element.model]"></div>

DIREKTIF

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

Nah... jelas ini adalah hanya sebuah trik... aku ingin tahu jika ada yang lebih bersih, lebih banyak cara alami untuk melakukannya... tanpa mengubah kode atau menggunakan direktif...

Matteo Piazza
Jawaban edit 30 Oktober 2013 в 4:26
Komentar (0)

bagi saya ini: 

uib-typeahead="o as o.RagioneSociale for o in main.getLocation($viewValue)"

bukannya:

typeahead="o as o.RagioneSociale for o in main.getLocation($viewValue)"

itu benar-benar berguna

aku punya json dibuat seperti ini:

[{"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">

dan berakhir pada sesuatu seperti memiliki menu dropdown dengan hanya RagioneSociale nilai dan model di mana aku bisa melihat kedua teks dan id dan mencetak mereka dengan normal {{asyncSelected}}

Komentar (0)