Angularjsを使用してTypeaheadウィジェットを作成します-SitePoint

AngularJSプロジェクトを開始している場合は、Angularですべてのコンポーネントを記述したい場合があります。既存のjQueryプラグインを再利用することは確かに可能ですが、ディレクティブの中にjQueryの束を投げることは、必ずしも物事を行う正しい方法ではありません。私のアドバイスは、最初に同じことをよりシンプル/より良い方法で純粋な角度で実装できるかどうかを確認することです。これにより、アプリケーションコードを清潔で保守可能にします。初心者を対象としたこのチュートリアルは、Angularjsを使用したシンプルなTypeaheadウィジェットの作成を読者に歩きます。

キーテイクアウト

• チュートリアルは、AngularJSを使用したTypeaheadウィジェットを作成するために読者をガイドします。これは、ユーザーがテキストボックスに入力するための提案を提供します。ウィジェットは、高度に構成可能で既存のシステムに簡単に統合できるように設計されています。
このプロセスには、Restful APIと対話し、自動コンプリートの提案のためにJSONデータを返す工場を構築し、TypeaHead入力フィールドをカプセル化するための指示を作成し、指示のテンプレートを作成することが含まれます。このディレクティブは、エンドユーザーがJSONオブジェクトプロパティなどのオプションを調整するように構成可能に保持されます。
• チュートリアルでは、ディレクティブのリンク関数を更新し、使用する指令を構成する方法についても説明しています。最終製品は、構成オプションを備えたAngularJS TypeaHeadウィジェットで、CSSを使用してさらにカスタマイズできます。完全なソースコードは、Githubでダウンロードできます。
• 概要
このチュートリアルでは、誰かがテキストボックスに入力し始めるとすぐに提案を作成するシンプルなTypeaheadウィジェットを構築します。最終製品が非常に構成可能であり、既存のシステムに簡単にプラグインできるように、アプリをアーキテクチャ化します。作成プロセスに伴う基本的な手順は次のとおりです。

RESTFUL APIと対話する工場を作成し、自動の完全な提案に使用されるJSONを返します。

JSONデータを使用してTypeAhead入力フィールドをカプセル化するディレクティブを作成します。

エンドユーザーが次のオプションを構成できるように、
• ディレクティブを構成可能に保ちます。
構成オプション

提案の一部として表示する正確なJSONオブジェクトプロパティ。

選択したアイテムを保持するコントローラーの範囲のモデル。

1. アイテムが選択されたときに実行されるコントローラーの範囲の関数。
TypeaHead入力フィールドのプレースホルダーテキスト（プロンプト）

ステップ1：データを取得するための工場を構築する

最初のステップとして、Angularの$ HTTPサービスを使用してRestful APIと対話する工場を作成しましょう。次のスニペットをご覧ください。

<span>var typeAhead = angular.module('app', []);
</span>
typeAhead<span>.factory('dataFactory', function($http) {
</span>  <span>return {
</span>    <span>get: function(url) {
</span>      <span>return $http.get(url).then(function(resp) {
</span>        <span>return resp.data; // success callback returns this
</span>      <span>});
</span>    <span>}
</span>  <span>};
</span><span>});</span>

以前のコードは、APIからJSONデータを取得するDataFactoryという工場を作成します。工場の詳細については説明しませんが、$ HTTPサービスの仕組みを簡単に理解する必要があります。 urlをget（）関数に渡し、それが約束を返します。この約束に関する別の呼びかけ（）も別の約束を返します（工場のget（）関数からこの約束を返します）。この約束は、成功コールバックの返品値がtun（）に渡されて解決されます。そのため、コントローラー内では、$ httpと直接対話しません。代わりに、コントローラー内の工場のインスタンスを要求し、URLでget（）関数を呼び出します。したがって、工場と対話するコントローラーコードは次のようになります。

typeAhead<span>.controller('TypeAheadController', function($scope<span>, dataFactory</span>) { // DI in action
</span>  dataFactory<span>.get('states.json').then(function(data) {
</span>    $scope<span>.items = data;
</span>  <span>});
</span>  $scope<span>.name = ''; // This will hold the selected item
</span>  $scope<span>.onItemSelected = function() { // this gets executed when an item is selected
</span>    <span>console.log('selected=' + $scope.name);
</span>  <span>};
</span><span>});</span>

以前のコードでは、米国のJSONリストを返すStates.jsonというAPIエンドポイントを使用します。データが利用可能になったら、リストをスコープモデル項目に保存します。また、モデル名を使用して、選択したアイテムを保持します。最後に、ユーザーが特定の状態を選択すると、function onitemSelected（）が実行されます。

ステップ2：ディレクティブの作成

以下に示すTypeAheadディレクティブから始めましょう。

typeAhead<span>.directive('typeahead', function($timeout) {
</span>  <span>return {
</span>    <span>restrict: 'AEC',
</span>    <span>scope: {
</span>      <span>items: '=',
</span>      <span>prompt: '@',
</span>      <span>title: '@',
</span>      <span>subtitle: '@',
</span>      <span>model: '=',
</span>      <span>onSelect: '&'
</span>    <span>},
</span>    <span>link: function(scope<span>, elem, attrs</span>) {
</span>    <span>},
</span>    <span>templateUrl: 'templates/templateurl.html'
</span>  <span>};
</span><span>});</span>

指令では、いくつかのプロパティを定義する孤立した範囲を作成しています。

• アイテム：JSONリストを孤立した範囲に渡すために使用されます。
プロンプト：TypeAhead入力フィールドにプレースホルダーテキストを渡すための片道バインディング。
• タイトルとサブタイトル：自動コンプリートフィールドの各エントリには、タイトルとサブタイトルがあります。 Typeaheadウィジェットのほとんどはこのように機能します。彼らは通常（常にではないにしても）、ドロップダウン提案の各エントリに2つのフィールドを持っています。 JSONオブジェクトに追加のプロパティがある場合、これはドロップダウンの各提案で表示される2つのプロパティを渡す方法として機能します。私たちの場合、タイトルは州の名前に対応し、字幕はその略語を表します。
モデル：選択を格納するための双方向のバインディング。
onSelect：メソッドバインディング、選択が終了したらコントローラースコープで関数を実行するために使用されます。

注：JSON応答の例を以下に示します。

<span>var typeAhead = angular.module('app', []);
</span>
typeAhead<span>.factory('dataFactory', function($http) {
</span>  <span>return {
</span>    <span>get: function(url) {
</span>      <span>return $http.get(url).then(function(resp) {
</span>        <span>return resp.data; // success callback returns this
</span>      <span>});
</span>    <span>}
</span>  <span>};
</span><span>});</span>

ステップ3：テンプレートを作成

次に、指令で使用されるテンプレートを作成しましょう。

typeAhead<span>.controller('TypeAheadController', function($scope<span>, dataFactory</span>) { // DI in action
</span>  dataFactory<span>.get('states.json').then(function(data) {
</span>    $scope<span>.items = data;
</span>  <span>});
</span>  $scope<span>.name = ''; // This will hold the selected item
</span>  $scope<span>.onItemSelected = function() { // this gets executed when an item is selected
</span>    <span>console.log('selected=' + $scope.name);
</span>  <span>};
</span><span>});</span>

まず、ユーザーが入力する入力テキストフィールドをレンダリングします。 Scopeプロパティプロンプトは、プレースホルダー属性に割り当てられます。次に、状態のリストをループし、名前と略語のプロパティを表示します。これらのプロパティ名は、タイトルとサブタイトルのスコーププロパティで構成されています。 Ng-MouseenterとNg-Classの指令は、ユーザーがマウスでホバーするときにエントリを強調するために使用されます。次に、フィルター：モデルを使用します。モデルは、入力フィールドに入力されたテキストでリストをフィルターします。最後に、ng-hideディレクティブを使用して、入力テキストフィールドが空か、ユーザーがアイテムを選択した場合にリストを非表示にしました。選択されたプロパティは、HandleSelection（）関数内でTrueに設定され、誰かが入力フィールドに入力を開始したときにFalse False（提案リストを表示する）に設定されます。

ステップ4：リンク関数を更新

次に、以下に示すように、指令のリンク関数を更新しましょう。

typeAhead<span>.directive('typeahead', function($timeout) {
</span>  <span>return {
</span>    <span>restrict: 'AEC',
</span>    <span>scope: {
</span>      <span>items: '=',
</span>      <span>prompt: '@',
</span>      <span>title: '@',
</span>      <span>subtitle: '@',
</span>      <span>model: '=',
</span>      <span>onSelect: '&'
</span>    <span>},
</span>    <span>link: function(scope<span>, elem, attrs</span>) {
</span>    <span>},
</span>    <span>templateUrl: 'templates/templateurl.html'
</span>  <span>};
</span><span>});</span>

function HandleSelection（）は、選択した状態名でScopeプロパティ、モデルを更新します。次に、現在および選択したプロパティをリセットします。次に、onselect（）関数を呼び出します。割り当てscope.model = selectedItemがバインドされたコントローラースコーププロパティをすぐに更新しないため、遅延が追加されます。選択したアイテムでモデルが更新された後、コントローラースコープコールバック関数を実行することが望ましいです。それが$タイムアウトサービスを使用した理由です。 さらに、関数iscurrent（）とsetCurrent（）は、テンプレートで一緒に使用され、自動完成の提案のエントリを強調表示します。次のCSSは、ハイライトプロセスを完了するためにも使用されます。

<span>{
</span>  <span>"name": "Alabama",
</span>  <span>"abbreviation": "AL"
</span><span>}</span>

ステップ5：ディレクティブを構成して使用します

最後に、以下に示すように、HTMLの指令を呼び出しましょう。

<span><span><span><input> type<span>="text"</span> ng-model<span>="model"</span> placeholder<span>="{{prompt}}"</span> ng-keydown<span>="selected=false"</span> /></span>
</span><span><span><span><br>/></span>
</span>
<span><span><span><div> class<span>="items"</span> ng-hide<span>="!model.length || selected"</span>>
  <span><span><span><div> class<span>="item"</span> ng-repeat<span>="item in items | filter:model  track by $index"</span> ng-click<span>="handleSelection(item[title])"</span> <span>style<span>="<span>cursor:pointer</span>"</span></span> ng-class<span>="{active:isCurrent($index)}"</span> ng-mouseenter<span>="setCurrent($index)"</span>>
    <span><span><span><p> class<span>="title"</span>></p></span>{{item[title]}}<span><span></span>></span>
</span>    <span><span><span><p> class<span>="subtitle"</span>></p></span>{{item[subtitle]}}<span><span></span>></span>
</span>  <span><span><span></span></span></span></span></span>
</div></span>></span>
</span><span><span><span></span></span></span>
</div></span>></span></span></span></span>

結論

このチュートリアルでは、構成オプションを備えたAngularJS TypeaHeadウィジェットを作成する方法を示しています。完全なソースコードは、GitHubでダウンロードできます。何かが不明確であるか、何かを改善したい場合は、自由にコメントしてください。また、ライブデモをチェックすることを忘れないでください。

angularjsを使用したTypeaheadウィジェットの作成に関するよくある質問TypeaHeadドロップダウンの外観をカスタマイズするにはどうすればよいですか？

​​

Typeeaheadドロップダウンの外観をカスタマイズすることで、CSSを使用して実現できます。クラス.dropdown-menuを使用して、ドロップダウンメニューをターゲットにすることができます。たとえば、背景色とフォントの色を変更する場合は、次のCSSコードを使用できます。 343a40;

}
このCSSをメインのCSSファイルまたはHTMLの

コントローラーでは、このようなonselect関数を定義できます：

$ scope.onselect = function（item、model、label）{
//選択したアイテムで何かをする
};

どうすれば使用できますかAngularjsのブートストラップを備えたTypeeahead？

この例では、状態は州の配列、$ ViewValueはユーザーが入力した値であり、Limitto：8は8に提案の数を制限します。 Angularjs？Angularjsのリモートデータを使用してTypeaheadを使用するには、$ HTTPサービスを使用して、リモートサーバーからデータを取得できます。 TypeaHead属性を使用して、入力フィールドを取得したデータにバインドできます。たとえば、

$ scope.getStates = function（val）{
return $ http.get（ '/api/stathes'、{
params：{

name：val

}

}） item.name;

}）;
} getStates（$ ViewValue） "... />
この例では、getStatesは、次のように入力された値に基づいてリモートサーバーから状態を取得する関数です。ユーザー。

以上がAngularjsを使用してTypeaheadウィジェットを作成します-SitePointの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。