web-dev-qa-db-ja.com

angular ui-bootstrap typeMheadのselectMatchのコールバック？

私は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は、ユーザーがEnterキーを押すかリストをクリックすると呼び出されるメソッドですが、コールバックを設定する方法がわかりません...

ありがとう！

angularjsangular-uibootstrap-typeahead
91
mchasles

これを実行するより良い方法があります。 新しいコールバックメソッドが追加されました

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

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

ビューで次を追加します。

 <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 spec を参照してください（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/

248
Matt

編集：この方法は現在、最良の方法ではありません。上記の回答で説明したように、onSelectコールバックを使用することをお勧めします。

私が望んでいたことをどのように行うかを見つけました。 typeahead-editable属性があり、falseに設定されている場合、モデルの値が選択されたときにのみ選択値が変更されることがわかりました。したがって、$ watchは、新しい値が選択されたときに確認するために正常に機能しています。

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

次はあなたのHTMLであるべきです

 <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)' />

コールバック関数を使用して、入力タグにtypeahead-on-selectを追加するだけです。

以下はコントローラー内部に移動します

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

$ item内では、提案リストのメイン配列で渡したオブジェクト全体を取得します

2
Sandeep Gantait

検証前に次を試してください

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