1. ホーム
  2. angularjs

[解決済み] angular ui-bootstrap typeahead callback on selectMatch?

2023-02-01 09:13:34

質問

私はangular ui-bootstrapのtypeaheadを使っていますが、多くの選択肢をピックアップする方法として使いたいので、selectMatchメソッドが起動したときに選択した値を取得する必要がありますが、私のコントローラーでそれを行う方法を見つけることができません。

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

選択した値を見ると、キーが押されるたびに変化しているのですが...。

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

selectMatchメソッドは、ユーザーがエンターキーを押したり、リストをクリックしたときに呼び出されるメソッドであることはわかりましたが、そのコールバックの方法がわかりません...。

ありがとうございます。

どのように解決するのですか?

現在、より良い方法があります。 新しいコールバックメソッドが追加されました

コントローラファイルに以下を追加します。

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

viewに以下を追加します。

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

を参照してください。 typeahead仕様 を参照してください(onSelectを検索)。

次の URL が役に立つかどうか調べてください。 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/