ng-click with a dynamic {{}} string

Question

I have a HTML table that has the id set with a databind inside of a ng-repeat

<div class="project" ng-repeat="project in data.projects">
    <h2>
      {{projectState.name}}
    </h2>
    <table class="table" id="{{project.name + selectedType}}">
    ...
    </table>
    ...
</div>

This properly sets the id as expected, but I need to use this id in a ng-click call.

<button ng-click="export({{project.name + selectedType}})">
...
</button>

This produces the error when the page loads

Error: [$parse:syntax] Syntax Error: Token '{' invalid key at column 16 of the expression [export({{project.name + selectedType}})] starting at [{project.name + selectedType}})].

How do I properly reference the databound id of {{project.name + selectedType}} in a ng-click?

ng-click expects an angular expression. The mustaches shouldn't be there: ng-click="export(project.name + selectedType)" — JB Nizet
– JB Nizet, Commented Sep 26, 2017 at 17:41
Are you trying to pass a reference to the element into the export() function? — JC Ford
– JC Ford, Commented Sep 26, 2017 at 17:44

Maxim Shoustin · Accepted Answer · 2017-09-26 17:46:13Z

1

Pass project.name and selectedType as 2 arguments to export method :

<button ng-click="export(project.name,selectedType)">
...
</button>

and inside export method concatenate them:

$scope.export = function(name, type){
   var val = name + type;
   // ...
}

or just remove {{ }} from export

edited Sep 26, 2017 at 17:46

answered Sep 26, 2017 at 17:40

Maxim Shoustin

78k29 gold badges212 silver badges229 bronze badges

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

1 Comment

Kirk Over a year ago

That did it with export(project.name + selectedType) but I like your method more.

Muhammad Usman · Accepted Answer · 2017-09-26 17:43:10Z

0

You don't need to give an expression inside of export(). This should be resolved using

export(project.name,selectedType)

answered Sep 26, 2017 at 17:43

Muhammad Usman

10.1k26 silver badges41 bronze badges

Comments

ferhado · Accepted Answer · 2017-09-26 17:52:41Z

angular.module('myApp',[])
.controller('myCtlrl',function($scope){
$scope.projects=[
  { id: 1, name: 'John', address: 'Highway 71'},
  { id: 2, name: 'Peter', address: 'Lowstreet 4'},
  { id: 3, name: 'Amy', address: 'Apple st 652'},
  { id: 4, name: 'Hannah', address: 'Mountain 21'},
  { id: 5, name: 'Michael', address: 'Valley 345'},
  { id: 6, name: 'Sandy', address: 'Ocean blvd 2'},
  { id: 7, name: 'Betty', address: 'Green Grass 1'},
  { id: 8, name: 'Richard', address: 'Sky st 331'},
  { id: 9, name: 'Susan', address: 'One way 98'},
  { id: 10, name: 'Vicky', address: 'Yellow Garden 2'},
  { id: 11, name: 'Ben', address: 'Park Lane 38'},
  { id: 12, name: 'William', address: 'Central st 954'},
  { id: 13, name: 'Chuck', address: 'Main Road 989'},
  { id: 14, name: 'Viola', address: 'Sideway 1633'}
];

$scope.export=function(id){
alert(id);
};
})

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtlrl">
  <div class="project">
      <table class="table" id="{{project.name + address}}" border=1>
      <tr><th>ExportButton</th><th>Id</th><th>Name</th><th>Address</th></tr>
         <tr ng-repeat="project in projects">
           <td><button ng-click="export(project.name+project.address)">Export</button></td>
           <td>{{project.id}}</td>
           <td>{{project.name}}</td>
           <td>{{project.address}}</td>
         </tr>
      </table>
  </div>
</div>

Syed Asad Abbas · Accepted Answer · 2017-09-26 18:40:59Z

0

When you are using ng-click, it means you are already in angular scope so you don't need to use {{}} to call a function or evaluate the expression

answered Sep 26, 2017 at 18:40

Syed Asad Abbas

795 bronze badges

Collectives™ on Stack Overflow

ng-click with a dynamic {{}} string

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related