How to pass AngularJS ng-repeat Variable to Javascript click event

Question

I would like to know how to pass Angular ng-repeat variable to my Javascript onclick event

My angular repeater

       <div class="data" data-ng-repeat="sub in subs" >  
            <button onclick="ConfirmDialog(sub.SubID)">Cancel</button>
            {{ sub.someOtherProperty}}
            {{ sub.someOtherProperty}}
            {{ sub.someOtherProperty}}                
        </div>

My script function

<script type='text/javascript'>

    function ConfirmDialog(subID) {
             console.log('Succesfully submitted id: ', subID);
    });
 </script>

The error : sub is not defined (in the onclick() call from the button element) all other properties show as expected.

Brian Noah · Accepted Answer · 2014-11-06 22:27:47Z

7

You are running straight javascript onclick instead of ng-click.

move confirmDialog into your controller and ng-click can attach to it.

 <div class="data" data-ng-repeat="sub in subs" >  
        <button ng-click="ConfirmDialog(sub.SubID)">Cancel</button>            
 </div>

 $scope.ConfirmDialog = function (subID) {
         console.log('Succesfully submitted id: ', subID);
 });

edited Nov 6, 2014 at 22:27

answered Nov 6, 2014 at 22:20

Brian Noah

2,99220 silver badges28 bronze badges

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

1 Comment

Don Thomas Boyle Over a year ago

"Turning into a String" approach won't work , error : Error: [$compile:nodomevents] Interpolations for HTML DOM event attributes are disallowed. Please use the ng- versions (such as ng-click instead of onclick) instead. However, moving it into the controller did +1!

Mouneer · Accepted Answer · 2015-06-04 15:24:26Z

4

If you don't want to use ng-click, you still have a chance! Try the following

<tr ng-repeat="supplier in suppliers" id="{{supplier.id}}">
       <button onclick="readVariable(this);">
</tr>

<script>
    function readVariable(elem){
        id = elem.parentNode.id;
        console.log(id);  //it works!
    }
</script>

edited Jun 4, 2015 at 15:24

answered Jun 4, 2015 at 2:41

Mouneer

13.5k3 gold badges37 silver badges46 bronze badges

Comments

D_R · Accepted Answer · 2014-11-06 22:15:49Z

0

You should use ng-click instead in order to access the ng-repeat variable

<button ng-click="ConfirmDialog(sub.SubID)">Cancel</button>

answered Nov 6, 2014 at 22:15

D_R

4,9724 gold badges47 silver badges62 bronze badges

2 Comments

Don Thomas Boyle Over a year ago

I'm not passing it back to an Angular controller. Ng-click wouldn't work.

Don Thomas Boyle Over a year ago

I think I misunderstood you as you were trying to tell me to move everything into the controller by using ng-click. I was not aware that this is what you meant, so +1.

Collectives™ on Stack Overflow

How to pass AngularJS ng-repeat Variable to Javascript click event

3 Answers 3

1 Comment

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related