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:

Answer 1

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 2

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

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

   $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 5

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 6

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