2

ここで、角度を使用してオートコンプリートの提案を実装しようとしています。あなたの専門知識が必要です。

html は次のとおりです。

<div my-autosuggest>
    <input type="text" my-autosuggest-input>
    <ol>
         <li ng-repeat"item in items" my-autosuggest-list>...</li>
    </ol>
</div>

<li>テンプレートを使用して要素を生成したくありません。(リストとドロップダウンの間に、任意の種類の要素を任意の順序で柔軟に使用し、その間に他の追加の要素を使用できるようにしたい)

難しいのは、入力の矢印キーに応答して、リスト内の次/前の要素を強調表示することです。my-autosuggest-listディレクティブから次の要素を選択する必要があることを他のディレクティブに知らせるにはどうすればよいですかmy-autosuggest-input

次のように、1 つのコントローラーに複数の自動提案がある場合があることに注意してください。

<div ng-controller="MyController">
   <div my-autosuggest>
       <input type="text" my-autosuggest-input>
       <ol>
            <li ng-repeat"item in items" my-autosuggest-list>...</li>
       </ol>
   </div>
   <div my-autosuggest>
       <ol>
            <li ng-repeat"item in items" my-autosuggest-list>...</li>
       </ol>
       <input type="text" my-autosuggest-input>
   </div>
</div>

これまでのところ、インデックスの変更を試みまし$watchたが、リスト内の一部の要素に対してウォッチが呼び出されないことがあります (おそらくバグです)。$broadcast は機能しません。入力が別のコントローラーまたは別の要素内にラップされている可能性があるため、ブロードキャストがリストに聞こえないためです。

また、ルートスコープに各 autosuggest の変数を配置しようとしましたが、ディレクティブが呼び出される順序は常に親から子へとは限らないため、その変数を初期化して毎回新しい変数を作成することはできmy-autosuggestませmy-autosuggest-inputん。その前に呼ばれました。

これをangularで設計する方法についての提案は大歓迎です。

4

1 に答える 1