angular ui-bootstrap typeahead callback di selectMatch?

92

Saya menggunakan ui-bootstrap typeahead sudut dan saya ingin menggunakannya sebagai cara untuk mengambil banyak pilihan, jadi saya perlu mendapatkan nilai yang dipilih saat metode selectMatch diluncurkan tetapi saya tidak dapat menemukan cara melakukannya yang di pengontrol saya

<div class='container-fluid' ng-controller="TypeaheadCtrl">
<pre>Model: {{selected| json}}</pre>
<input type="text" ng-model="selected" typeahead="state for state in states | filter:$viewValue">

Jika saya melihat nilai yang dipilih, saya mendapat perubahan setiap kali tombol ditekan ...

scope.$watch('selected', function(newValue, oldValue) {... });

Saya mengerti bahwa metode selectMatch adalah metode yang dipanggil ketika pengguna menekan enter atau mengklik daftar tetapi saya tidak tahu bagaimana cara memanggil balik itu ...

Terima kasih!

mchasles
sumber

Jawaban:

250

Ada cara yang lebih baik untuk melakukan ini sekarang. Metode panggilan balik baru telah ditambahkan

Dalam file pengontrol tambahkan yang berikut ini:

 $scope.onSelect = function ($item, $model, $label) {
    $scope.$item = $item;
    $scope.$model = $model;
    $scope.$label = $label;
};

Dalam tampilan tambahkan yang berikut ini:

 <input type="text"
        ng-model="selected"
        typeahead="state for state in states | filter:$viewValue"
        typeahead-editable="false"
        typeahead-on-select="onSelect($item, $model, $label)"/>

Lihat spesifikasi kepala jenis untuk informasi lebih lanjut (cari onSelect).

Lihat apakah URL berikut membantu http://www.techguides.in/how-to-create-autocomplete-using-angularjs-ui/

http://www.techguides.in/how-to-customize-autocomplete-to-display-multiple-columns-using-angularjs-ui-2/

Matt
sumber
2
Terima kasih! Bekerja seperti pesona. Ini mungkin harus secara resmi didokumentasikan di halaman referensi di bawah judul Typeahead
ariestav
29
Apakah ada yang tahu apa sebenarnya objek $ item $ model $ label di callback typeahead-on-select = 'onSelect ($ item, $ model, $ label)'?
AardVark71
@Matt, apakah ada cara untuk melakukan postback menggunakan $ http dengan acara onSelect?
Pratik Gaikwad
15
@ AardVark71 $ item $ model $ label ketiga properti ini masing-masing adalah sebagai berikut. Jika Anda mengikat array JSON dari objek yang memiliki lebih dari satu properti, maka Anda akan mendapatkan item yang dipilih dalam $ item dengan semua properti. $ model adalah model sudut inbuilt yang digunakan yang akan menyimpan item yang dipilih. nilai dan $ label akan memberi Anda nilai yang ditampilkan di kotak teks setelah pemilihan. Jadi singkatnya, $ label akan sama dengan $ model. Semoga ini menjelaskan keraguan Anda.
Pratik Gaikwad
16
@ AardVark71 Hal ini lebih mudah untuk menjelaskan jika ungkapan seperti: state.id as state.name for state in states. Dalam hal $itemini state, $ model state.id, dan $labeladalahstate.name
Aximili
10

Sunting: metode ini bukan yang terbaik sekarang. Lebih baik menggunakan callback onSelect seperti yang dijelaskan pada jawaban di atas.

Saya menemukan bagaimana melakukan apa yang saya inginkan. Saya melihat bahwa ada atribut typeahead-editable dan jika disetel ke false maka nilai yang dipilih berubah hanya ketika nilai dari model dipilih. Dan jam tangan $ berfungsi dengan baik untuk memeriksa kapan nilai baru dipilih.

<input type="text" ng-model="selected" typeahead="state for state in states | filter:$viewValue" typeahead-editable="false">

link: function(scope, elm, attrs){
    scope.$watch('selected', function(newValue, oldValue) {
        if (newValue)
          console.log(oldValue+"->"+newValue);
     });
}
mchasles
sumber
2

Berikut adalah HTML Anda

 <input id="title" type="text"  ng-model="title"  typeahead="data.enquiry_title for data in titleData | filter:$viewValue | limitTo:8" 
typeahead-on-select='onSelect($item, $model, $label)' />

cukup tambahkan typeahead-on-select di tag input dengan fungsi callback.

Mengikuti akan masuk ke dalam pengontrol

$scope.onSelect = function ($item, $model, $label) {
            console.log($item);
            if($item.tid)
                $scope.activeTitleId = $item.tid
        };

inside $ item Anda akan mendapatkan seluruh objek yang telah Anda berikan di array utama daftar saran

Sandeep Gantait
sumber
0

coba hal berikut sebelum validasi

 modelCtrl.$setValidity('editable', true);
Mohamed.Abdo
sumber