How to pass data to angular controller?

Question

I am learning angularjs and I am able to list out my data I receive via a REST API. I display the data in a table and in one of the columns I want to have a delete button that will eventually make a DELETE call to remove that particular record from the database. Here is the HTML I using:

<table st-table="displayedCollection" st-safe-src="hosts" class="table table-striped">
    <thead>
    ...
    </thead>
    <tbody> 
        <tr ng-repeat="x in displayedCollection">
            <td>{{x.hostname}}</td>
            <td>{{x.ipaddress}}</td>
            <td>{{x.macaddress}}</td>            
            <td>
                <button 
                   type="button" 
                   class="btn btn-default btn-sm" 
                   ng-click="delete_record({{x._id}})">
                   <span class="glyphicon glyphicon-remove"></span>
                </button>
            </td>
        </tr>
    </tbody>
    ...    
   </table>

This gives me this error:

Error: [$parse:syntax] Syntax Error: Token '{' invalid key at column 16 of the expression [delete_record({{x._id}})] starting at [{x._id}})].

My controller looks like this:

app.controller("meanVoyCtrl", function($scope,$http) {
    ...        
    $scope.delete_record  = function(id) {alert("id is ["+id+"]");};
    ...
});

For now I'd be happy if I could just an alert pop up display the _id of the record to be deleted.

What am I doing wrong here?

Thanks

Answer 1

You only need to use curly braces if you are outside an angular directive ('ng-repeat' in this case). It serves as a way to use your angular data or controller code. Because you are inside an angular directive already, the curly braces are not needed. Your button html would become:

ng-click="delete_record(x._id)">

Answer 2

You don't need the {{}} around x._id. Should look like this:

ng-click="delete_record(x._id)"

Answer 3

Get rid of the curlys, just do:

ng-click="delete_record(x._id)">