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.

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. — Andris Briedis
– Andris Briedis, Commented Apr 12, 2017 at 11:09

Hadi · Accepted Answer · 2017-04-12 10:54:18Z

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>

answered Apr 12, 2017 at 10:54

Hadi

17.3k4 gold badges41 silver badges63 bronze badges

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

3 Comments

Hadi Over a year ago

what display in console when use this ng-click="editMapSize( C.change )"?

Andris Briedis Over a year ago

Console nothing. html -> ng-click="editMapSize( C.change )" No variable. Text.

Andris Briedis Over a year ago

Its simple. Now. $scope.editMapSize( mapId ){ console.log( mapId ); };

Ankit Agarwal · Accepted Answer · 2017-04-12 10:59:44Z

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.

Collectives™ on Stack Overflow

AngularJS value as parameter in function?

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related