So implementieren Sie die Listenauswahl aller interaktiven Komponenten in Angular

In diesem Artikel wird hauptsächlich das Beispiel der Auswahl aller interaktiven Komponenten zum Schreiben einer Liste in Angular vorgestellt. Jetzt teile ich es mit Ihnen und gebe es als Referenz.

Bei der Entwicklung eines Geschäfts-Backends müssen Sie häufig die Auswahl in der Tabelle verwenden und alle diese Arten von Interaktionen auswählen. Darüber hinaus ist die Benutzeroberfläche verschiedener Systeme und Szenarien unterschiedlich. Beispiel: Die Tabelle ist ein einfaches Kontrollkästchen. Für die Bildliste führt der UI-Designer einige Tricks aus. Wenn der Benutzer sie auswählt, wird eine durchsichtige Prüfaufforderung auf dem Bild usw. platziert. Unser System wurde mit der Angular 1.X-Version entwickelt. Daher habe ich Angulars dekorative Anweisungen verwendet, um mehrere Anweisungen zu schreiben und sie zusammen zu verwenden, um eine solche Szene zu kapseln. Dies unterscheidet sich von den Entwicklungsideen für Komponenten, denen wir zuvor begegnet sind. Lassen Sie uns zunächst die Anforderungen und Erweiterungspunkte analysieren.

Anforderungsanalyse

1. Einzelauswahl erreichen

2. Alle Auswahl treffen

3. Sie können festlegen, ob eine Mehrfachauswahl oder eine Einzelauswahl zulässig ist. Wenn Sie mehrmals auswählen, ist die maximale Anzahl an Auswahlmöglichkeiten begrenzt.

4. ermöglicht eine seitenübergreifende Auswahl. Die seitenübergreifende Auswahl bedeutet hier, dass nach dem Wechsel zur nächsten Seite noch die Auswahl auf der vorherigen Seite gespeichert werden kann. Die Auswahlmöglichkeiten, denen wir in der Vergangenheit begegneten, merkten sich oft nur die aktuelle Seite und löschten sie, sobald sie aktualisiert wurde. Dies ist ein anderer Ort;

5. erfordert, dass Sie die Benutzeroberfläche und Interaktionsauslöser selbst definieren

Designideen

1. Das Gleiche gilt hier für die ausgewählte Interaktionslogik, daher liegt der Fokus darauf, wie diese Logik gekapselt werden kann. Die Interaktionslogik ist hier hauptsächlich: 2. Klicken Sie, um alle auszuwählen. 3. Klicken Sie, um die Auswahl der Listenelemente zu ändern. Wenn es sich um eine Einzelauswahl handelt, löschen Sie die vorherige Auswahl. Wenn es sich um eine Mehrfachauswahl handelt, prüfen Sie, ob die maximale Auswahlgrenze überschritten ist. Schauen wir uns die gleichen Anwendungsszenarien noch einmal an. Wir werden den Kontext so festlegen, dass er ein Listenarray und ein ausgewähltes Array hat. Daher erhalten wir die folgende Anleitung.

2. moSelect-Anweisung

Anweisung, die die gesamte Auswahllogik kapselt. An die Szene anpassen:

hat eine Listensammlung

1. Jedes Element ist ein Objekt; 🎜 >Seitenübergreifende Auswahl;

2. Verwendung

3. <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>

   Anweisungen:

1. Erzielen Sie eine vollständige Auswahl Relevante Code-Kapselung;

2. mo-select ist eine Containeranweisung, die die Methode zur Auswahl aller und einzelner Elemente definiert und auf dem Listencontainerdom

definiert ist

Der Wert von mo-select ist das Listenobjekt des Gültigkeitsbereichs, das mit den Elementen in ng-repeat übereinstimmt.

item-name: teilt dem Befehl den Objektnamen mit jedes Element, und der Befehl wird übergeben. Der Name wird im Bereich jedes Elements gesucht. Konsistent mit Element in ng-repeat;

1. select-all-name: Statusvariable für alle Auswahlen. Standard: isSelectedAll

2. item-select-name: Der Variablenname, ob jedes erfasste Objekt ausgewählt ist, wird im Item-Objekt gespeichert, um Überschneidungen mit vorhandenen Geschäftsfeldern zu vermeiden kann konfiguriert werden oder nicht. Standard: select;

3. selected-list-name: Der Variablenname der ausgewählten Objektliste. Standard: selectedList;

4. init-selected-list: Initialisiert die ausgewählte Objektliste. Diese Variable wird nur zur Initialisierung verwendet, ähnlich dem Prop-Attribut in der Vue-Komponente;

5. allow-multiple-select: ob Mehrfachauswahl zugelassen werden soll; >

   select-count-limit: Wenn Mehrfachauswahlen zulässig sind, die maximale Anzahl der Elemente, die ausgewählt werden können. Wenn es nicht übergeben wird, ist es unendlich;

6. item-equal-func: Objektgleichheitsfunktion, die zum Kapseln des eigenen Gleichheitsprinzips des Geschäftsobjekts verwendet wird. Beispiel: Einige Szenarien basieren auf der ID, andere auf anderen Geschäftslogiken. Wenn nicht, basiert die Standardeinstellung auf dem ID-Attribut des Objekts.

7. 3. Die erste Version ist im Select-All-Dom definiert und ein Eingabe-Kontrollkästchen. Sein Wert gibt an, ob der im aktuellen Bereich gespeicherte Variablenname ausgewählt ist oder nicht;
4. Auf jedem Dom definiert. Es kann zwei Stellen geben:
ist auf einer eigenen Eingabe-Chebox definiert.
ist auf dem Eingabecontainer definiert. Klicken Sie ähnlich wie bei tr, um die gesamte Zeile auszuwählen. Es kann auch für ein einzelnes Element definiert werden.

Wenn Sie die ausgewählten Optionen erhalten möchten, rufen Sie einfach den durch selected-list-name angegebenen Variablennamen direkt im aktuellen Bereich ab.

1. Verwendungsschritte:

2. Mo-Select im Container definieren und relevante Parameter entsprechend den tatsächlichen Anforderungen konfigurieren. Muss: mo-select, item-name;

Fügen Sie die Direktive mo-select-all zum auszuwählenden Button hinzu, ohne Parameter zu konfigurieren

Fügen Sie in der Single-Item-Vorlage von ng-repeat die Direktive mo-select-single zum DOM hinzu, in der die Single-Select-Interaktion hinzugefügt werden muss.

1. Vervollständigen Sie die Konfiguration.
Hinweise
4. Der Wert von mo-select muss mit den Elementen von ng-repeat übereinstimmen

Der Wert von item-name muss mit dem Element von ng-repeat übereinstimmen;

Solche Anleitungen sind in unserer Geschäftsentwicklung immer noch sehr flexibel einsetzbar. Es mag den Anschein haben, dass die Konfigurationselemente etwas umständlich sind, aber tatsächlich können die meisten von ihnen Standardwerte verwenden. Schauen wir uns die verschiedenen Erscheinungsformen an:





Es gibt nicht viel Code, etwa 200 Zeilen, und der Code stammt aus dem Projekt. Es ist nicht sehr kompliziert, deshalb habe ich keine Demo gemacht, ich werde es hier mit dem Code-Link teilen. Studierende, die daran interessiert sind, sich zu verbessern, können es nutzen und nach Belieben Änderungen vornehmen.

Ich habe das Obige für Sie zusammengestellt und hoffe, dass es Ihnen in Zukunft hilfreich sein wird.

Verwandte Artikel:

So implementieren Sie den Scroller, kehren in Vue zur Seite zurück und merken sich die Scrollposition

Wie behandelt man Deep Copy? in vue

So implementieren Sie Lese- und Schreibcookies in JavaScript

So verwenden Sie das Ladefortschritts-Plug-in mit Pace.js und NProgress .js (ausführliches Tutorial)

Über den App-Lebenszyklus im WeChat-Applet (ausführliches Tutorial)

Über die Verwendung von NProgress. js Ladefortschritts-Plugin in jQuery

Das obige ist der detaillierte Inhalt vonSo implementieren Sie die Listenauswahl aller interaktiven Komponenten in Angular. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!