how to pass angular js variable inside onclick function as parameter

Question

I have tried to pass AngularJS variable as argument value inside onclick() to call javascript function. Can anyone guide me on how to do it?

My code:

 <div onclick="deleteArrival({{filterList.id}})" class="table-icon deleteIcon">{{filterList.id}}</div>

Answer 1

You should be using ng-click, there is no reason to use onclick as angular provides you with this functionality

<div ng-click="deleteArrival(filterList.id)" 
     class="table-icon deleteIcon">{{filterList.id}}</div>

You should then move your function into your AngularJS Controller, and bind it to the scope

$scope.deleteArrival = function(filterListId) { ... };

If you ABSOLUTELY need to use onclick to call an external function, you could change the function to something like this in your scope, still using the ng-click attribute above:

$scope.deleteArrival = function(filterListId) { window.deleteArrival(filterListId); };

However I can't see a reason not to move it into your scope

Answer 2

If you still want to use onclick , this is work for me , I hope it work for you too.

<div id="{{filterList.id}}" onclick="deleteArrival(this.id)" class="table-icon deleteIcon">{{filterList.id}}</div>

Answer 3

Im not going to second guess your reasons for not using ng-click, as other contributors have pointed out you really 'ought'. However if you really want/need to, heres my suggestion by using 'this' and data attributes.

<div data-filterListId="{{filterList.id}}" onclick="deleteArrival(this)" class="table-icon deleteIcon">{{filterList.id}}</div>
function deleteArrival(arrivalElem) {
    alert('myId=' + arrivalElem.getAttribute("data-filterListId"));
}

Answer 4

You could easily solve your problem using ng-click but you should have deleteArrival method in your scope.

Markup

<div ng-click="deleteArrival(filterList.id)" class="table-icon deleteIcon">
  {{filterList.id}}
</div>

Answer 5

Above thing is easily possible using ng-click directive and having that function inside controller scope, only the thing is you need to assign your java-script function reference to controller scope variable. No need to rewriting the function in your scope again. Pass the reference of function will do the trick.

Markup

<div ng-click="deleteArrival(filterList.id)" class="table-icon deleteIcon">
   {{filterList.id}}
</div>

Controller

//assign javascript method reference in controller
$scope.deleteArrival = deleteArrival;

Answer 6

You are not allowed to create a binding for event handler attributes like onclick, onload, onsubmit, etc. in angularjs because, there is no practical value in binding to these attributes and doing so it only exposes your application to security vulnerabilities like XSS. For these reasons binding to event handler attributes (all attributes that start with on and formaction attribute) is not supported in angularjs.

For your case,

Inside ng-repeat, use ng-click for sending values to your function and declare that function in controller.

See here for documentation of ng-click

Hope this helps !

Answer 7

try this without the curly braces deleteArrival(filterList.id)

Answer 8

I had a case where I could not use ng-click due to window binding. Did not get direct answer but the below did work for me. I know it is not a good solution but workable in my case.

angular.element(this).scope().ctrlName.variable

You can try using your own class structure. So the click will be as below:

onclick="test(angular.element(this).scope().ctrlName.ObjName.variable)"

Answer 9

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

<span ng-click='getpop({{x.Code}})' class="btn-default btn">{{ x.title }}</span> 

<b>This works perfect for me !</b>

Answer 10

My use case was where my application is relying on a large JavaScript file of functions that are not written in Angular. For this, I added a function in my controller that connects to one of these JS functions:

$scope.controllerFunction = function() {
  javaScriptFunction('foo');
}

javascriptFunction(parameter){
  let variable = parameter
} 

Then in my view, making use of ng-click, I accessed the controller function with:

 ng-click="controllerFunction()"

For me, the "onclick="deleteArrival(this.id)" example returns undefined. The above was the best solution.