Pertanyaan Cara menghapus teks dari input typeahead AngularUI


Saya memiliki input typeahead. Teks input diatur ke opsi yang dipilih pada typeahead. Namun, saya ingin menghapus teks ini dan menampilkan nilai "placeholder" lagi pada kotak teks setelah saya memilih salah satu opsi dari typeahead (karena saya menambahkan nilai yang dipilih ke div lain di selectMatch() metode.

<input id="searchTextBoxId" type="text" 
    ng-model="asyncSelected" placeholder="Search  addresses..."
    typeahead="address for address in getLocation($viewValue) | filter:$viewValue"
    typeahead-loading="loadingLocations" class="form-control"
    typeahead-on-select="selectMatch(asyncSelected)" typeahead-min-length="3"
    typeahead-wait-ms="500">

Saya mencoba untuk menetapkan nilai teks dan nilai placeholder dari elemen Input menggunakan IDnya tetapi itu tidak berhasil, seperti ini:

// the input text was still the 
$('#searchTextBoxId').attr('placeholder', 'HELLO');

hasil yang dipilih

// the input text was still the selected result
$('#searchTextBoxId').val('');

Bagaimana saya mengatur atau mengatur ulang nilai teks?


29
2018-02-28 19:47


asal


Jawaban:


Saya mencari jawaban untuk ini juga, untuk waktu yang lama. Saya akhirnya menemukan resolusi yang berhasil untuk saya.

Saya akhirnya mengatur NgModel ke string kosong dalam itu typeahead-on-select atribut:


Di dalam Anda typeahead-on-select tambahkan atribut asyncSelected = ''; di belakang fungsi pilih Anda, seperti:

<input ...
    typeahead-on-select="selectMatch(asyncSelected); asyncSelected = '';" />

Membuat tipe terakhir Anda mencari sesuatu seperti:

<input id="searchTextBoxId" type="text" 
    ng-model="asyncSelected" placeholder="Search  addresses..."
    typeahead="address for address in getLocation($viewValue) | filter:$viewValue"
    typeahead-loading="loadingLocations" class="form-control"
    typeahead-on-select="selectMatch(asyncSelected); asyncSelected = '';" 
    typeahead-min-length="3"
    typeahead-wait-ms="500">

Fiddle menambahkan setiap pilihan ke array


47
2018-04-23 15:09



Sebenarnya masalah ini bukan dari typeahead. Ini adalah masalah umum ng-model, scope and dot notation.

Lihat Ruang lingkup warisan dalam Angular

Pada situasi Anda, Anda cukup mengubah nama model seperti xx.selected dengan dot-notation dan set xx.selected kosong dalam callback typeahead-on-select.


9
2017-11-07 02:56



Untuk mengatur atau mengatur ulang nilai, tidakkah Anda akan mengakses nilai model-ng, yang async dipilih berdasarkan kode Anda? Dalam pengontrol:

$scope.asyncSelected = '';

2
2018-02-28 20:10



Jawaban @ Asok tidak masalah jika Anda perlu segera menghapus nilainya, tetapi untuk saya sendiri, dan mungkin orang lain yang datang ke sini berdasarkan judul pertanyaan, Jawaban @Is mungkin lebih baik (jika singkat).

Saya mengubah typeahead sebagai berikut:

<input id="searchTextBoxId" type="text" 
    ng-model="myNewVar.asyncSelected" placeholder="Search  addresses..."
    typeahead="address for address in getLocation($viewValue) | filter:$viewValue"
    typeahead-loading="loadingLocations" class="form-control"
    typeahead-on-select="selectMatch(myNewVar.asyncSelected)" typeahead-min-length="3"
    typeahead-wait-ms="500">

kemudian, setiap kali saya perlu menghapus masukan dari pengontrol saya, saya dapat menelepon

$scope.myNewVar.asyncSelected = '';

0
2017-07-06 13:01