web-dev-qa-db-ja.com

AngularUIの先行入力からテキストをクリアする方法

先行入力があります。入力テキストは、先行入力で選択されたオプションに設定されます。ただし、先行入力からオプションの1つを選択した後、このテキストをクリアし、テキストボックスに「プレースホルダー」値を再度表示したい（選択した値をselectMatch()メソッドの別のdivに追加するため）.

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

Idを使用してInput要素のテキスト値とプレースホルダー値を設定しようとしましたが、次のように機能しませんでした。

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

選択した結果

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

テキスト値を設定またはリセットするにはどうすればよいですか？

angularjsangular-uiangular-ui-bootstrapangular-ui-typeahead
32
S S

私もこれに対する答えを長い間探していました。私は最終的に自分に合った解決策を見つけました。

NgModelを空の文字列withinに設定することになりましたtypeahead-on-select属性：

あなたのtypeahead-on-select属性の追加asyncSelected = '';あなたのselect関数の後ろに、次のように：

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

最終的な先行入力を次のようにします。

<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 adding each selection to an array

50
jnthnjns

実際、この問題は先行入力によるものではありません。 ng-model, scope and dot notationに関する一般的な問題です。

Angularのスコープ継承 を参照してください

状況では、ドット表記でxx.selectedなどのモデル名を変更し、typeahead-on-selectコールバックでxx.selectedを空に設定するだけです。

9
hey

値を設定またはリセットするには、コードに従ってasyncSelectedであるng-model値にアクセスしませんか？コントローラー内：

$scope.asyncSelected = '';
2
JeffryHouser

@ Asok's answer は値をすぐにクリアする必要がある場合は問題ありませんが、私自身、およびおそらく質問のタイトルに基づいてここに来る他の人にとっては @ hey's answer の方が良いかもしれません（簡潔な場合）。

先行入力を次のように変更しました。

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

その後、コントローラから入力をクリアする必要があるときはいつでも、私は呼び出すことができます

$scope.myNewVar.asyncSelected = '';
0
Michael