Angularjsを使用してTypeaheadウィジェットを作成します-SitePoint-jsチュートリアル-php.cn

Creating a Typeahead Widget with AngularJS - SitePoint

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

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

キーテイクアウト

チュートリアルは、AngularJSを使用したTypeaheadウィジェットを作成するために読者をガイドします。これは、ユーザーがテキストボックスに入力するための提案を提供します。ウィジェットは、高度に構成可能で既存のシステムに簡単に統合できるように設計されています。
チュートリアルでは、ディレクティブのリンク関数を更新し、使用する指令を構成する方法についても説明しています。最終製品は、構成オプションを備えたAngularJS TypeaHeadウィジェットで、CSSを使用してさらにカスタマイズできます。完全なソースコードは、Githubでダウンロードできます。
概要

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

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

ディレクティブを構成可能に保ちます。

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

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

アイテムが選択されたときに実行されるコントローラーの範囲の関数。

ステップ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: '&amp;'
</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ウィジェットのほとんどはこのように機能します。彼らは通常（常にではないにしても）、ドロップダウン提案の各エントリに2つのフィールドを持っています。 JSONオブジェクトに追加のプロパティがある場合、これはドロップダウンの各提案で表示される2つのプロパティを渡す方法として機能します。私たちの場合、タイトルは州の名前に対応し、字幕はその略語を表します。

注：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: '&amp;'
</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</span> 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><span><div</span> class<span>="items"</span> ng-hide<span>="!model.length || selected"</span>></span>
</span>  <span><span><span><div</span> 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><span><span><p</span> class<span>="title"</span>></span>{{item[title]}}<span><span></p</span>></span>
</span>    <span><span><span><p</span> class<span>="subtitle"</span>></span>{{item[subtitle]}}<span><span></p</span>></span>
</span>  <span><span><span></div</span>></span>
</span><span><span><span></div</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