How can you pass a bound variable to an ng-click function?

Question

I have a simple delete button that will accept a string or number but won\'t accept an ng-model variable ( not sure if that\'s the correct terminology ).

<         


        

Answer 1

The ngClick directive binds an expression. It executes Angular code directly (as ngIf, ngChange, etc.) without the need of {{ }}.

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>

Answer 2

You don't need to use curly brackets ({{}}) in the ng-click, try this:

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