AngularJS value as parameter in function?

Question

AngularJS 1.3.15
jQuery 2.1.3

'use strict'

Passing parameter to function not work.

C.change = 328;

ng-click="editMapSize( C.change )"
in page

ng-click="editMapSize( C.change )"

ng-click="editMapSize( {{ C.change }} )"
error

Syntax Error: Token '{' invalid key at column 15 of the expression [editMapSize( {{C.change}} )] starting at [{C.change}} ].

.html

<table class="table table-striped table-hover">
 <tbody>
 <tr>
 <th ng-repeat="T in htmlTableTitle">{{ T.t }}</th>
 </tr>
 </tbody>
 <tbody>
 <tr ng-repeat="R in htmlTablePrepareData">
 <td ng-repeat="C in R " 
 class="{{ C.class }}" 
 data-map-id="{{ C.change }}" 
 ng-click="editMapSize( {{C.change}} )">{{ C.value }}</td>
 </tr>
 </tbody>
</table>

How to pass variable?

2. How in this case read data attribute?
Click on $( this ) show $scope.

• Ajay Singh: ngClick="editMapSize(C.change)">{{ ::c,value }}
• Andris Briedis: ngClick="editMapSize( C.change ) in html show ngClick="editMapSize( C.change ). With {{}} show variable. But not work "ngclick" insted of "ng-click". ngclick="editMapSize( 328 ) and not work.

Answer 1

remove curly brackets.

 <tr ng-repeat="R in htmlTablePrepareData">
 <td ng-repeat="C in R " 
 class="{{ C.class }}" 
 data-map-id="{{ C.change }}" 
 ng-click="editMapSize(C.change)">{{ C.value }}</td>
 </tr>

• Hadi: what display in console when use this ng-click="editMapSize( C.change )"?
• Andris Briedis: Console nothing. html -> ng-click="editMapSize( C.change )" No variable. Text.
• Andris Briedis: Its simple. Now. $scope.editMapSize( mapId ){ console.log( mapId ); }

Answer 2

When you pass variable through the angular directive, say ng-click or ng-if or anything else we need to pass the variable without angular expression i.e, avoid using curly braces. So, you can do

<table class="table table-striped table-hover">
 <tbody>
 <tr>
 <th ng-repeat="T in htmlTableTitle">{{ T.t }}</th>
 </tr>
 </tbody>
 <tbody>
 <tr ng-repeat="R in htmlTablePrepareData">
 <td ng-repeat="C in R " 
 class="{{ C.class }}" 
 data-map-id="{{ C.change }}" 
 ng-click="editMapSize(C.change)">{{ C.value }}</td>
 </tr>
 </tbody>
</table>

If you are using only the change value of C this is good but if you need to pass more parameters of C then avoid passing individual values. Instead pass the whole object like

ng-click="editMapSize(C)"

and manipulate this object in editMapSize function inside controller.