2012-09-28 6 views
68

Ich habe eine einfache Schaltfläche zum Löschen, die eine Zeichenfolge oder eine Zahl akzeptiert, aber nicht akzeptiert eine ng-Modell-Variable (nicht sicher, ob das die richtige Terminologie ist).Wie können Sie eine gebundene Variable an eine ng-click-Funktion übergeben?

<button class="btn btn-danger" ng-click="delete('{{submission.id}}')">delete</button> 

Welche erzeugt:

<button class="btn btn-danger" ng-click="delete('503a9742d6df30dd77000001')">delete</button> 

jedoch nichts passiert, wenn ich auf. Wenn ich eine Variable fest codiere, funktioniert es gut. Ich nehme an, ich bin nur die Dinge nicht „Angular“ Art und Weise zu tun, aber ich bin nicht sicher, was auf diese Weise ist :)

Hier ist mein Controller-Code:

$scope.delete = function (id) { 
    alert('delete ' + id); 
} 

Antwort

131

Sie brauchen nicht zu verwenden, geschweiften Klammern ({{}}) im ng-click, versuchen Sie dies:

<button class="btn btn-danger" ng-click="delete(submission.id)">delete</button> 
+2

wie würde ich dann durch eine Funktion submission.id passieren? Von dem, was ich verstehe Funktion (submission.id) {} ​​würde nicht in meinem Controller arbeiten, weil eine Funktion kann nicht einen Zeitraum –

+1

* Klarstellung * :: Sie müssen nicht geschweifte Klammern bei der Übergabe Winkelwerte an die Attribute, aber Sie werden sie immer noch im internen HTML-Markup benötigen. Beispiel: Rick

+0

Ich habe mich gefragt, warum es bei der Ausführung von eckigen Klammern anstelle von Variablenwerten galt: ' 'Ihre Antwort hat mir sehr geholfen:' ' Lustig ist, dass der falsche Weg so aussah, als ob er richtig im Developer Tools Fenster gerendert wurde. – jaybro

1

die ngClick Direktive bindet einen Ausdruck. Es führt den Winkelcode direkt aus (wie ngIf, ngChange, usw.) ohne die Notwendigkeit von {{ }}.

angular.module('app', []).controller('MyCtrl', function($scope) { 
 
    $scope.submission = { id: 100 }; 
 

 
    $scope.delete = function(id) { 
 
     alert(id + " deleted!"); 
 
    } 
 
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 

 
<div ng-app="app" ng-controller="MyCtrl"> 
 
    <button ng-click="delete(submission.id)">Delete</button> 
 
</div>

Verwandte Themen