Angularですべてのインタラクティブコンポーネントをリスト選択する方法を実装する方法

この記事では、Angular でリストを作成する際にすべてのインタラクティブなコンポーネントを選択する例を主に紹介しますので、参考にしてください。

ビジネス バックエンドを開発する場合、多くの場合、テーブル内の選択を使用して、この種のインタラクションをすべて選択する必要があります。さらに、システムやシナリオが異なれば UI も異なります。たとえば、テーブルは画像リストの単純なチェックボックスであり、ユーザーがそれを選択すると、半透明のチェックプロンプトが画像上に配置されます。私たちのシステムは angular 1.X バージョンを使用して開発されています。そこで、Angular の装飾命令を使用していくつかの命令を作成し、それらを組み合わせてそのようなシーンをカプセル化しました。これは、これまでのコンポーネントの開発思想とは異なります。まずは要件と拡張ポイントを分析しましょう。

要件分析

1. は単一選択を実現します。

2. は複数選択または単一選択を許可するように設定できます。複数回選択すると、選択肢の最大数が制限されます

3. により、ページをまたがる選択が可能になります。ここでのページをまたいだ選択とは、次のページに切り替えた後も、前のページでの選択内容を引き続き記憶できることを意味します。私たちが過去に経験した選択肢は、現在のページのみを記憶し、更新するとクリアされることが多かったです。これは別の場所です。

4. では、UI とインタラクション トリガーを自分で定義する必要があります

5. デザインのアイデア

実際、ここでは選択したインタラクション ロジックが同じです。このロジックをカプセル化する方法について。ここでの対話ロジックは主に次のとおりです。 2. クリックしてすべてを選択します。 3. クリックしてリスト項目の選択を切り替えます。単一選択の場合は前の選択をクリアし、複数選択の場合は最大選択制限を超えているかどうかを確認します

1. 同じアプリケーションのシナリオをもう一度見てみましょう。リスト配列と選択された配列を持つようにコンテキストを設定します。 したがって、次の指示が得られます。

2. moSelect命令

すべての選択ロジックをカプセル化する命令。シナリオに適応する:

各項目はオブジェクトです。

1. 使用法:

1.主に3 つの命令は、すべての選択に関連するコードのカプセル化を実装します。 mo-select これは ng-repeat の項目と一致するスコープのリスト オブジェクトです。
item-name: コマンドに各項目のオブジェクト名を伝え、コマンドはそれぞれのスコープ内で検索します。この名前によるアイテム。 ng-repeat の項目と一致します。
select-all-name: すべての選択の状態変数。デフォルト: isSelectedAll

item-select-name: 既存のビジネスフィールドとの重複を避けるために、記録された各オブジェクトが選択されているかどうかの変数名を設定するかどうかを設定できます。 select;

selected-list-name: 選択されたオブジェクト リストの変数名。デフォルト: selectedList;

init-selected-list: 選択されたオブジェクトのリストを初期化します。この変数は、vue コンポーネントの prop 属性と同様に、初期化にのみ使用されます。
allow-multiple-select: 複数の選択を許可するかどうか。最大何個まで選択できます。渡されない場合は無限になります。
item-equal-func: ビジネス オブジェクト自体の等価性原理をカプセル化するために使用されるオブジェクト等価性関数。たとえば、一部のシナリオは ID に基づいており、一部のシナリオは他のビジネス ロジックに基づいています。渡されない場合、デフォルトはオブジェクトの id 属性に基づきます
3。全選択 dom で定義された最初のバージョンは入力チェックボックスです。その値は、現在のスコープに保存されている変数名が選択されているかどうかを示します。
4. 4. 各 dom で定義されます。独自の入力チェックボックスで定義された

5. 入力コンテナで定義された

6. の 2 つの場所が存在します。 tr と同様に、クリックして行全体を選択します。単一の要素で定義することもできます。

7. 選択されたオプションを取得したい場合は、現在のスコープで selected-list-name で指定された変数名を取得するだけです。

使用手順:
9. コンテナ内で mo-select を定義し、実際のニーズに応じて関連パラメーターを構成します。必須: mo-select, item-name;

パラメータを設定せずに、選択する必要があるボタン dom に mo-select-all ディレクティブを追加します。

ng-repeat の単一項目テンプレート内で、単一選択インタラクションを追加する必要がある DOM に mo-select-single ディレクティブを追加します。パラメータを設定する必要はありません。
設定を完了します。

注意事項

mo-select は ng-repeat の項目と一致している必要があります。

1. item-name は ng-repeat の項目と一致している必要があります。

2. 概要

3. このような指示は、当社のビジネス開発において非常に柔軟に使用できます。設定項目は少し面倒に思えるかもしれませんが、実際にはほとんどの設定項目はデフォルト値を使用できます。そのさまざまな表現を見てみましょう:

   

   

   コードは約 200 行で、それほど複雑ではないので、デモは行いませんでした。コードリンクとともにここで共有します。 改善に興味のある学生は、それを取り入れて、自由に変更を加えることができます。
   上記は私があなたのためにまとめたものです。
   関連記事:

   vueでページに戻るスクローラーを実装し、スクロール位置を記憶する方法

   vueでディープコピーを表示する方法

   JavaScriptでCookieの読み書きを実装する方法

   方法Pace.js および NProgress.js で読み込み進行状況プラグインを使用するには (詳細なチュートリアル)

   WeChat アプレットでのアプリのライフ サイクルについて (詳細なチュートリアル)

   NProgress.js 読み込みの使用についてjQuery の進行状況プラグイン

以上がAngularですべてのインタラクティブコンポーネントをリスト選択する方法を実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。