Comment implémenter la liste de sélection de tous les composants interactifs en angulaire

Cet article présente principalement l'exemple de sélection de tous les composants interactifs pour rédiger une liste dans Angular. Maintenant, je le partage avec vous et le donne comme référence.

Lors du développement d'un backend commercial, vous devez souvent utiliser la sélection dans le tableau, sélectionner tout ce type d'interaction. De plus, l’interface utilisateur des différents systèmes et des différents scénarios est différente. Par exemple : le tableau est une simple case à cocher ; pour la liste d'images, le concepteur d'interface utilisateur fera quelques astuces. Lorsque l'utilisateur le sélectionnera, une invite de vérification translucide sera placée sur l'image, etc. Notre système est développé en utilisant la version angulaire 1.X. Par conséquent, j'ai utilisé les instructions décoratives d'Angular pour écrire plusieurs instructions et les ai utilisées ensemble pour encapsuler une telle scène. Ceci est différent des idées de développement de composants que nous avons rencontrées auparavant. Analysons d’abord les exigences et les points d’expansion.

Analyse des exigences

1. Réaliser la sélection unique

2. Réaliser toutes les sélections

3. Vous pouvez définir si vous souhaitez autoriser la sélection multiple ou la sélection unique. Si vous sélectionnez plusieurs fois, il existe un nombre maximum de choix

4. permet la sélection sur plusieurs pages. La sélection sur plusieurs pages signifie ici qu'après le passage à la page suivante, la sélection sur la page précédente peut toujours être mémorisée. Dans le passé, les choix que nous rencontrions ne mémorisaient souvent que la page actuelle et l'effaçaient une fois actualisée. C'est un endroit différent ;

5. vous oblige à définir vous-même l'interface utilisateur et les déclencheurs d'interaction

Idées de conception

La même chose ici est la logique d'interaction sélectionnée, l'accent est donc mis sur la façon d'encapsuler cette logique. La logique d'interaction ici est principalement la suivante : 2. Cliquez pour tout sélectionner ; 3. Cliquez pour changer la sélection des éléments de la liste. S'il s'agit d'une sélection unique, effacez la sélection précédente ; s'il s'agit d'une sélection multiple, vérifiez si la limite de sélection maximale est dépassée
Regardons à nouveau les mêmes scénarios d'application ; Nous allons définir le contexte pour avoir un tableau de liste et un tableau sélectionné. Par conséquent, nous obtenons les instructions suivantes.

Commande moSelect

Une commande qui encapsule toute la logique de sélection. Adaptez-vous à la scène :

a une collection de listes
Chaque élément est un objet ; 🎜 >Sélection croisée ;
3. Utilisation

Instructions :

1. Encapsulation de code liée à la sélection de tout ;

2. mo-select est une instruction de conteneur, qui définit la méthode de sélection de tout et de sélection d'un seul élément, et est définie sur le conteneur de liste dom ;

<table mo-select="list" select-all-name="isSelectedAll" item-name="item" item-select-name="select" selected-list-name="selectedList" init-selected-list="initSelectedList" allow-multiple-select="false" select-count-limit="2" item-equal-func="itemEqual">
            <thead>
              <tr>
                <th><input type="checkbox" ng-checked="isSelectedAll" mo-select-all></th>
                <th>商户名称</th>
                <th>电话</th>
                <th>地点</th>
                <th>更新时间</th>
                <th>播放</th>
              </tr>
            </thead>
            <tbody>
              <tr ng-repeat="item in list" mo-select-single >
                <td>
                   <input type="checkbox" ng-checked="item.select" mo-select-single1 > 
                </td>
                <td>{{item.name}}</td>
                <td>{{item.tel}}</td>
                <td>{{item.addr}}</td>
                <td>{{item.updateTime|msDateFormat:&#39;YYYY-MM-DD&#39;}}</td>
                <td>
                  <p audio-playable="item.url" play-trigger=".audio-play" pause-trigger=".audio-pause">
                    <button class="btn btn-primary audio-play" ng-show="!audioInfo.playing" >播放</button>
                    <button class="btn btn-primary audio-pause" ng-show="audioInfo.playing" >暂停</button>
                  </p>
                </td>
              </tr>
            </tbody>
          </table>

La valeur de mo-select est l'objet de liste de portée, qui est cohérent avec les éléments de ng-repeat

item-name : indique l'instruction, le nom d'objet de chaque élément, l'instruction Il sera recherché dans le périmètre de chaque élément par ce nom. Conformément à l'élément dans ng-repeat ;

1. select-all-name : variable d'état pour toutes les sélections. Par défaut : isSelectedAll

2. item-select-name : Le nom de la variable indiquant si chaque élément enregistré est sélectionné sera stocké dans l'objet élément afin d'éviter tout chevauchement avec les champs commerciaux existants. peut être configuré ou non. Par défaut : select ;

3. selected-list-name : Le nom de la variable de la liste d'objets sélectionnée. Par défaut : selectedList ;

4. init-selected-list : initialise la liste d'objets sélectionnés. Cette variable n'est utilisée que pour l'initialisation, similaire à l'attribut prop dans le composant vue

5. allow-multiple-select : s'il faut autoriser la sélection multiple ; >

   select-count-limit : Si plusieurs sélections sont autorisées, le nombre maximum d'éléments pouvant être sélectionnés. S'il n'est pas transmis, il sera infini ;

6. item-equal-func : fonction d'égalité d'objet, utilisée pour encapsuler le propre principe d'égalité de l'objet métier. Par exemple : certains scénarios sont basés sur l’identifiant et d’autres sont basés sur une autre logique métier. S'il n'est pas transmis, la valeur par défaut est basée sur l'attribut id de l'objet

7. 3. mo-select-all sélectionne toutes les instructions. Défini sur le dom select-all, la première version est une case à cocher de saisie. Sa valeur indique si le nom de la variable enregistré dans la portée actuelle est sélectionné ou non ;
4. Défini sur chaque dom. Il peut y avoir deux endroits :
est défini sur sa propre chebox d'entrée
est défini sur le conteneur d'entrée. Semblable à tr, cliquez pour sélectionner la ligne entière. Il peut également être défini sur un seul élément.

Si vous souhaitez obtenir les options sélectionnées, obtenez simplement le nom de la variable spécifié par selected-list-name directement dans la portée actuelle.

1. Étapes d'utilisation :

2. Définissez mo-select dans le conteneur et configurez les paramètres pertinents en fonction des besoins réels. Doit : mo-select, item-name ;

Ajouter la directive mo-select-all sur le bouton dom qui doit être sélectionné, sans configurer aucun paramètre

Dans le modèle à élément unique de ng-repeat, ajoutez la directive mo-select-single au DOM où l'interaction à sélection unique doit être ajoutée. Aucun paramètre n'a besoin d'être configuré ; 🎜>

Terminez la configuration.
2. Notes

3. La valeur de mo-select doit être cohérente avec les éléments de ng-repeat ; >

4. La valeur de item-name doit être cohérente avec l'élément de ng-repeat

Résumé

Ces instructions sont toujours très flexibles à utiliser dans notre développement commercial. Il peut sembler que les éléments de configuration soient un peu lourds, mais en fait, la plupart d'entre eux peuvent utiliser les valeurs par défaut. Regardons ses différentes manifestations :

Il n'y a pas beaucoup de code, environ 200 lignes, et le code est tiré du projet. Ce n'est pas très compliqué, donc je n'ai pas fait de démo, je la partage ici avec le lien du code. Les étudiants qui souhaitent s’améliorer peuvent s’en servir et apporter des modifications à volonté.

J'ai compilé ce qui précède pour vous, j'espère que cela vous sera utile à l'avenir.

Articles connexes :

Comment implémenter le retour du scroller à la page en vue et mémoriser la position de défilement

Comment traiter la copie profonde in vue

Comment implémenter les cookies de lecture et d'écriture en JavaScript

Comment utiliser le plug-in de progression du chargement avec Pace.js et NProgress .js (tutoriel détaillé)

À propos du cycle de vie de l'application dans l'applet WeChat (tutoriel détaillé)

À propos de l'utilisation du NProgress. js chargement du plug-in de progression dans jQuery

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!