Ich habe eine einfache Schleife mit folgendem ng-repeat
:
<li ng-repeat='task in tasks'>
<p> {{task.name}}
<button ng-click="removeTask({{task.id}})">remove</button>
</li>
Es gibt eine Funktion in der Steuerung $scope.removeTask(taskID)
.
Soweit ich weiß, wird Angular zuerst die Ansicht rendern und interpoliert {{task.id}}
durch eine Zahl ersetzen und dann beim Klickereignis die ng-click
Zeichenfolge auswerten .
In diesem Fall ng-click
wird genau das erwartet, was erwartet wird, dh:ng-click="removeTask(5)".
Es tut jedoch nichts.
Natürlich kann ich einen Code schreiben, um task.id
von der zu bekommen$tasks
Array oder sogar vom DOM zu kommen, aber dies scheint nicht der Angular-Weg zu sein.
Wie kann man also ng-click
Direktiven innerhalb einer ng-repeat
Schleife dynamischen Inhalt hinzufügen ?
quelle
ng-click
Ausdruck keine Klammern verwendet, dhng-click="taskData.currentTaskId = task.id"
Eine Sache, die mich wirklich aufgehängt hat, war, als ich dieses HTML im Browser inspizierte, anstatt zu sehen, dass es auf etwas erweitert wurde wie:
Ich sah:
Letzteres funktioniert jedoch!
Dies liegt daran, dass Sie sich in der "Winkelwelt" befinden, wenn Sie sich in ng-click = "" befinden. Angular weiß alles über task.id, während Sie sich in seinem Modell befinden. Es ist nicht erforderlich, die Datenbindung wie in {{}} zu verwenden.
Wenn Sie das Aufgabenobjekt selbst übergeben möchten, können Sie Folgendes tun:
quelle
Bemerkenswert für Leute, die dies bei ihrer Suche finden, ist dies ...
Beachten Sie den Wert von
ng-click
. Der übergebene ParametergoTo()
ist eine Zeichenfolge aus einer Eigenschaft des Bindungsobjekts (thebutton
), wird jedoch nicht in Anführungszeichen gesetzt. Sieht so aus, als würde AngularJS das für uns erledigen. Daran habe ich mich ein paar Minuten lang aufgehängt.quelle
das funktioniert. Vielen Dank. Ich injiziere benutzerdefiniertes HTML und kompiliere es mit Angular im Controller.
quelle
Die obigen Antworten sind ausgezeichnet. Sie können sich das folgende vollständige Codebeispiel ansehen, damit Sie genau wissen, wie es zu verwenden ist
quelle
HTML:
Java Script:
quelle
Hier ist die ng-Wiederholung mit ng-Klick-Funktion und zum Anhängen mit dem Schieberegler
quelle