95

angular ui-bootstrap タイプアヘッドを使用していますが、多くの選択肢を選択する方法として使用したいので、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キーを押すかリストをクリックしたときに呼び出されるメソッドであることがわかりましたが、その上でコールバックを行う方法がわかりません...

ありがとう ！

4

4 に答える 4

255

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

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

 $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)"/>

詳細については、先行入力の仕様を参照してください (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/

于 2013-08-01T12:51:46.823 に答える
10

編集: この方法は現在、最善の方法ではありません。この上の回答で説明されているように、 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);
     });
}
于 2013-04-22T07:55:23.817 に答える
3

以下はあなたの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 内では、提案リストのメイン配列で渡したオブジェクト全体を取得します

于 2016-02-13T17:54:04.087 に答える