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

Miguel · Accepted Answer · 2015-11-06 22:14:46Z

1

Get rid of the curlys, just do:

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

answered Nov 6, 2015 at 22:14

Miguel

20.7k5 gold badges47 silver badges68 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Ben · Accepted Answer · 2015-11-06 22:15:33Z

1

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

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

answered Nov 6, 2015 at 22:15

Ben

1,1793 gold badges17 silver badges28 bronze badges

Comments

jrkt · Accepted Answer · 2015-11-06 22:19:49Z

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)">

answered Nov 6, 2015 at 22:19

jrkt

2,7857 gold badges35 silver badges55 bronze badges

2 Comments

a better oliver Over a year ago

"You only need to use curly braces if you are outside an angular directive" - Whatever you mean by outside, the statement is simply not true. Whether or not curly braces can be used depends on what a directive expects. A bunch of them do expect templates, ngHref e.g. The reason the OP's code doesn't work is that the expression is parsed before it has been interpolated. Otherwise it would work even with the curly braces.

jrkt Over a year ago

Yes, you are correct. I didn't feel going into that much detail on this simple of a problem was necessary since he is not using an angular directive that does expect a template.

Collectives™ on Stack Overflow

How to pass data to angular controller?

3 Answers 3

Comments

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related