Ich versuche, eine Funktion zu schreiben, mit der ich ein Element entfernen kann, wenn auf die Schaltfläche geklickt wird, aber ich glaube, ich werde mit der Funktion verwechselt - verwende ich $digest
?
HTML & app.js:
<ul ng-repeat="bday in bdays">
<li>
<span ng-hide="editing" ng-click="editing = true">{{bday.name}} | {{bday.date}}</span>
<form ng-show="editing" ng-submit="editing = false">
<label>Name:</label>
<input type="text" ng-model="bday.name" placeholder="Name" ng-required/>
<label>Date:</label>
<input type="date" ng-model="bday.date" placeholder="Date" ng-required/>
<br/>
<button class="btn" type="submit">Save</button>
<a class="btn" ng-click="remove()">Delete</a>
</form>
</li>
</ul>
$scope.remove = function(){
$scope.newBirthday = $scope.$digest();
};
remove()
inng-click
der Art, wie Sie es haben, hat es keinen Kontext. Benötigen Sie weitere Details im Markup, um zu zeigen, was entfernt wird und ob es sich darin befindetng-repeat
, woher das zu entfernende Objekt stammt oder von welchem Verhalten Sie möchtenremove()
Antworten:
Um ein Element zu entfernen, müssen Sie es aus dem Array entfernen und können das
bday
Element im Markup an Ihre Entfernungsfunktion übergeben. Suchen Sie dann im Controller den Index des Elements und entfernen Sie ihn aus dem ArrayDann in der Steuerung:
Angular erkennt automatisch die Änderung am
bdays
Array und führt die Aktualisierung von durchng-repeat
DEMO: http://plnkr.co/edit/ZdShIA?p=preview
BEARBEITEN: Wenn Live-Updates mit dem Server einen von Ihnen erstellten Dienst verwenden
$resource
, um die Array-Updates zu verwalten, während der Server aktualisiert wirdquelle
$index
direkte Verwendung kann Fehler erzeugen, wenn Ihre Liste nach Vorlage gefiltert wird. Es ist eine Vorlagensache; es ist sicherer in der Anwendungng-click='remove(bday)'
dannarr.splice(arr.indexOf(bday),1);
this is undefined
. Plunker / jsfiddle vielleicht?.indexOf(item)
Gibt -1 zurück, wenn es nicht gefunden wird. Dies kann dazu führen, dass das Element am Ende des Arrays entfernt wird, wenn Sie nicht danach suchen.Dies ist eine richtige Antwort:
In der Antwort von @ charlietfl. Ich denke, es ist falsch, da Sie
$index
als Parameter übergeben, aber Sie verwenden den Wunsch stattdessen in Controller. Korrigiere mich, wenn ich falsch liege :)quelle
indexOf
Funktioniert NUR, wenn es IE9 + istFür den Fall, dass Sie sich in einer ng-Wiederholung befinden
Sie könnten eine Einzeiler-Option verwenden
$index
wird von Angular verwendet, um den aktuellen Index des Arrays im Inneren anzuzeigenng-repeat
quelle
Die Verwendung
$index
funktioniert in einfachen Fällen einwandfrei, und die Antwort von @ charlietfl ist großartig. Aber manchmal,$index
ist das nicht genug.Stellen Sie sich vor, Sie haben ein einzelnes Array, das Sie in zwei verschiedenen ng-Wiederholungen präsentieren. Eine dieser ng-Wiederholungen wird nach Objekten gefiltert, die eine wahrheitsgemäße Eigenschaft haben, und die andere wird nach einer fälschlichen Eigenschaft gefiltert. Es werden zwei verschiedene gefilterte Arrays vorgestellt, die von einem einzelnen Original-Array abgeleitet sind. (Oder, wenn es zur Visualisierung beiträgt: Vielleicht haben Sie eine einzelne Gruppe von Personen, und Sie möchten eine ng-Wiederholung für die Frauen in dieser Gruppe und eine andere für die Männer in derselben Gruppe .) Ihr Ziel: Löschen Sie zuverlässig aus dem Original-Array unter Verwendung von Informationen aus den Mitgliedern der gefilterten Arrays.
In jedem dieser gefilterten Arrays ist $ index nicht der Index des Elements im ursprünglichen Array. Dies ist der Index im gefilterten Unterarray . Sie können also den Index der Person im ursprünglichen
people
Array nicht erkennen, sondern kennen den $ index nur aus demwomen
oder demmen
Unterarray. Versuchen Sie, damit zu löschen, und Sie werden Elemente von überall verschwinden lassen, außer wo Sie wollten. Was ist zu tun?Wenn Sie das Glück haben, dass ein Datenmodell eine eindeutige Kennung für jedes Objekt enthält, verwenden Sie diese anstelle von $ index, um das Objekt und
splice
es aus dem Hauptarray zu finden. (Verwenden Sie mein Beispiel unten, aber mit dieser eindeutigen Kennung.) Aber wenn Sie nicht so viel Glück haben?Angular erweitert tatsächlich jedes Element in einem ng-wiederholten Array (im Hauptarray) mit einer eindeutigen Eigenschaft namens
$$hashKey
. Sie können das ursprüngliche Array nach einer Übereinstimmung$$hashKey
mit dem Element durchsuchen, das Sie löschen möchten, und es auf diese Weise entfernen.Beachten Sie, dass dies
$$hashKey
ein Implementierungsdetail ist, das nicht in der veröffentlichten API für ng-repeat enthalten ist. Sie können die Unterstützung für diese Eigenschaft jederzeit entfernen. Aber wahrscheinlich nicht. :-)Rufen Sie auf mit:
BEARBEITEN: Die Verwendung einer solchen Funktion, bei der
$$hashKey
anstelle eines modellspezifischen Eigenschaftsnamens ein Schlüssel verwendet wird , hat auch den wesentlichen zusätzlichen Vorteil, dass diese Funktion für verschiedene Modelle und Kontexte wiederverwendbar ist. Geben Sie Ihre Array-Referenz und Ihre Artikelreferenz an, und es sollte einfach funktionieren.quelle
Normalerweise schreibe ich so:
Ich hoffe, dies hilft Ihnen. Sie müssen einen Punkt (.) Zwischen $ scope und [yourArray] verwenden.
quelle
deleteCount
. Eine Ganzzahl, die die Anzahl der zu entfernenden alten Array-Elemente angibt. Wenn deleteCount 0 ist, werden keine Elemente entfernt. In diesem Fall sollten Sie mindestens ein neues Element angeben. Wenn deleteCount größer ist als die Anzahl der Elemente, die ab dem Start im Array verbleiben, werden alle Elemente bis zum Ende des Arrays gelöscht. Array.prototype.splice () DokumentationAufbauend auf der akzeptierten Antwort funktioniert dies mit
ngRepeat
:filter
und der Griff expections besser:Regler:
Aussicht:
quelle
Implementierung ohne Controller.
Die splice () -Methode fügt einem Array Elemente hinzu oder entfernt sie.
Index : Erforderlich. Eine Ganzzahl, die angibt, an welcher Position Elemente hinzugefügt / entfernt werden sollen. Verwenden Sie negative Werte, um die Position am Ende des Arrays anzugeben.
howmanyitem (s) : Optional. Die Anzahl der zu entfernenden Elemente. Bei der Einstellung 0 werden keine Elemente entfernt.
item_1, ..., item_n : Optional. Die neuen Elemente, die dem Array hinzugefügt werden sollen
quelle
Ich bin nicht der Meinung, dass Sie eine Methode auf Ihrem Controller aufrufen sollten. Sie sollten einen Dienst für jede tatsächliche Funktionalität verwenden und Anweisungen für jede Funktionalität für Skalierbarkeit und Modularität definieren sowie ein Klickereignis zuweisen, das einen Aufruf des Dienstes enthält, den Sie in Ihre Anweisung einfügen.
Also zum Beispiel auf Ihrem HTML ...
Dann erstellen Sie eine Direktive ...
Dann in Ihrem Dienst ...
Wenn Sie Ihren Code so richtig schreiben, können Sie künftige Änderungen ganz einfach schreiben, ohne Ihren Code neu strukturieren zu müssen. Es ist ordnungsgemäß organisiert und Sie behandeln benutzerdefinierte Klickereignisse korrekt, indem Sie mithilfe benutzerdefinierter Anweisungen binden.
Wenn Ihr Client beispielsweise sagt: "Hey, jetzt rufen wir den Server an, machen Brot und öffnen dann ein Modal." Sie können ganz einfach zum Dienst selbst wechseln, ohne HTML- und / oder Controller-Methodencode hinzufügen oder ändern zu müssen. Wenn Sie nur eine Zeile auf dem Controller hätten, müssten Sie möglicherweise einen Dienst verwenden, um die Funktionalität auf das vom Client gewünschte schwerere Heben auszudehnen.
Wenn Sie an anderer Stelle eine andere Schaltfläche zum Löschen benötigen, verfügen Sie jetzt über ein Direktivenattribut ('ng-remove-geburtstag'), das Sie jedem Element auf der Seite problemlos zuweisen können. Dies macht es jetzt modular und wiederverwendbar. Dies ist nützlich, wenn Sie sich mit dem Paradigma der HEAVY-Webkomponenten von Angular 2.0 befassen. In 2.0 gibt es keinen Controller. :) :)
Viel Spaß beim Entwickeln !!!
quelle
Hier ist eine andere Antwort. Ich hoffe es wird helfen.
Die vollständige Quelle finden Sie hier
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/splice
quelle
Wenn Sie eine ID oder ein bestimmtes Feld in Ihrem Artikel haben, können Sie filter () verwenden. seine Handlung wie Where ().
im Controller:
quelle
von der Steuerung (Funktion kann sich in derselben Steuerung befinden, es jedoch vorziehen, sie in einem Dienst zu behalten)
quelle