Adding parameter to ng-click function inside ng-repeat doesn t seem to work

Question

I have a simple loop with ng-repeat like this    lt li ng-repeat  task in tasks  gt     lt p gt    task name      lt button ng-click  removeTask   task id     gt remove lt  button gt   lt  li gt    There is a function in the controller  scope removeTask taskID    As far as I know Angular will first render the view and replace interpolated   task id   with a number  and then  on click event  will evaluate ng-click string   In this case ng-click gets totally what is expected  ie  ng-click  removeTask 5    However    it s not doing anything   Of course I can write a code to get task id from the  tasks array or even the DOM  but this does not seem like the Angular way   So  how can one add dynamic content to ng-click directive inside a ng-repeat loop

User · Answer

Above answers are excellent  You can look at the following full code example so that you could exactly know how to use   x000D   x000D     var app   angular module  hyperCrudApp        x000D   x000D     app controller  usersCtrl   function  scope   http    x000D        http get  https   jsonplaceholder typicode com users   then function  response    x000D          console log response data  x000D   x000D            scope users   response data  x000D             scope setKey   function  userId   x000D                alert userId  x000D                if localStorage   x000D                  localStorage setItem  userId   userId  x000D                  else   x000D                  alert  No support of localStorage   x000D                  return x000D                  x000D               function closed   x000D           x000D         x000D         header  x000D         color  green  x000D         font-weight  bold  x000D          x000D     lt  DOCTYPE html gt  x000D     lt html gt  x000D     lt head gt  x000D       lt title gt HyperCrud lt  title gt  x000D       lt meta charset  utf-8  gt  x000D       lt meta name  viewport  content  width device-width  initial-scale 1  gt  x000D       lt link rel  stylesheet  href  https   maxcdn bootstrapcdn com bootstrap 3 3 7 css bootstrap min css  gt  x000D       lt script src  https   ajax googleapis com ajax libs jquery 3 2 1 jquery min js  gt  lt  script gt  x000D       lt script src  https   maxcdn bootstrapcdn com bootstrap 3 3 7 js bootstrap min js  gt  lt  script gt  x000D       lt script src  https   ajax googleapis com ajax libs angularjs 1 6 4 angular min js  gt  lt  script gt  x000D     lt  head gt  x000D     lt body gt  x000D       lt  -- NAVBAR STARTS -- gt  x000D         lt nav class  navbar navbar-default navbar-fixed-top  gt  x000D           lt div class  container  gt  x000D             lt div class  navbar-header  gt  x000D               lt button type  button  class  navbar-toggle collapsed  data-toggle  collapse  data-target   navbar  aria-expanded  false  aria-controls  navbar  gt  x000D                 lt span class  sr-only  gt Toggle navigation lt  span gt  x000D                 lt span class  icon-bar  gt  lt  span gt  x000D                 lt span class  icon-bar  gt  lt  span gt  x000D                 lt span class  icon-bar  gt  lt  span gt  x000D               lt  button gt  x000D               lt a class  navbar-brand  href     gt HyperCrud lt  a gt  x000D             lt  div gt  x000D             lt div id  navbar  class  navbar-collapse collapse  gt  x000D               lt ul class  nav navbar-nav  gt  x000D                 lt li class  active  gt  lt a href     gt Home lt  a gt  lt  li gt  x000D                 lt li gt  lt a href   about   gt About lt  a gt  lt  li gt  x000D                 lt li gt  lt a href   contact   gt Contact lt  a gt  lt  li gt  x000D                 lt li class  dropdown  gt  x000D                   lt a href     class  dropdown-toggle  data-toggle  dropdown  role  button  aria-haspopup  true  aria-expanded  false  gt Apps lt span class  caret  gt  lt  span gt  lt  a gt  x000D                   lt ul class  dropdown-menu  gt  x000D                     lt li gt  lt a href   qAlarm details   gt qAlarm  amp raquo  lt  a gt  lt  li gt  x000D                     lt li gt  lt a href   YtEdit details   gt YtEdit  amp raquo  lt  a gt  lt  li gt  x000D                     lt li gt  lt a href   GWeather details   gt GWeather  amp raquo  lt  a gt  lt  li gt  x000D                     lt li role  separator  class  divider  gt  lt  li gt  x000D                     lt li gt  lt a href   WadStore details   gt WadStore  amp raquo  lt  a gt  lt  li gt  x000D                     lt li gt  lt a href   chatsAll details   gt chatsAll lt  a gt  lt  li gt  x000D                   lt  ul gt  x000D                 lt  li gt  x000D               lt  ul gt  x000D               lt ul class  nav navbar-nav navbar-right  gt  x000D                 lt li gt  lt a href   login   gt Login lt  a gt  lt  li gt  x000D                 lt li gt  lt a href   register   gt Register lt  a gt  lt  li gt  x000D                 lt li gt  lt a href   services   gt Services lt span class  sr-only  gt  current  lt  span gt  lt  a gt  lt  li gt  x000D               lt  ul gt  x000D             lt  div gt  x000D           lt  div gt  x000D         lt  nav gt  x000D         lt  --NAVBAR ENDS-- gt  x000D     lt br gt  x000D     lt br gt  x000D   x000D     lt div ng-app  hyperCrudApp  ng-controller  usersCtrl  class  container  gt  x000D       lt div class  row  gt  x000D        lt div class  col-sm-12 col-md-12  gt  x000D         lt center gt  x000D           lt h1 id  header  gt  Users  lt  h1 gt  x000D         lt  center gt  x000D        lt  div gt  x000D       lt  div gt  x000D   x000D       lt div class  row   gt  x000D           lt  --ITERATING USERS LIST-- gt  x000D         lt div class  col-sm-6 col-md-4  ng-repeat  user in users  gt  x000D           lt div class  thumbnail  gt  x000D             lt center gt  x000D              lt img src  https   cdn2 iconfinder com data icons users-2 512 User 1-512 png  alt  Image -   user name    class  img-responsive img-circle  style  width  100px  gt  x000D              lt hr gt  x000D             lt  center gt  x000D             lt div class  caption  gt  x000D              lt center gt  x000D                lt h3 gt   user name   lt  h3 gt  x000D                lt p gt   user email   lt  p gt  x000D                lt p gt  91   user phone   lt  p gt  x000D                lt p gt   user address city   lt  p gt  x000D               lt  center gt  x000D             lt  div gt  x000D               lt div class  caption  gt  x000D                   lt a href   users delete   user id     role  button  class  btn btn-danger btn-block  ng-click  setKey user id   gt DELETE lt  a gt  x000D                   lt a href   users update   user id     role  button  class  btn btn-success btn-block  ng-click  setKey user id   gt UPDATE lt  a gt  x000D               lt  div gt  x000D           lt  div gt  x000D         lt  div gt  x000D   x000D           lt div class  col-sm-6 col-md-4  gt  x000D             lt div class  thumbnail  gt  x000D               lt a href   regiser   gt  x000D                lt img src  http   img bhs4 com b7 b b7b76402439268b532e3429b3f1d1db0b28651d5 large jpg  alt  Register Image  class  img-responsive img-circle  style  width  100   gt  x000D               lt  a gt  x000D             lt  div gt  x000D           lt  div gt  x000D       lt  div gt  x000D         lt  --ROW ENDS-- gt  x000D     lt  div gt  x000D   x000D   x000D     lt  body gt  x000D     lt  html gt  x000D   x000D   x000D

User · Answer

HTML     lt div  ng-repeat  scannedDevice in ScanResult  gt           lt  --GridStarts-- gt             lt div  gt                 lt img ng-src      assets img PlaceHolder Test png                         lt  --Pass Param-- gt                     ng-click  connectDevice scannedDevice id                      altSrc       assets img PlaceHolder user place holder png                         onerror  this src     this  attr  altSrc    gt              lt  div gt        lt  div gt    Java Script        Global Variables     var  ANGULAR APP   angular module  TestApp            ANGULAR APP  controller  TestCtrl     scope   function  scope             Variables        scope ScanResult                Pass Parameter        scope connectDevice   function deviceID                alert  Connecting     deviceID

User · Answer

this works  thanks  I am injecting custom html and compile it using angular in the controller           var tableContent    lt div gt Search   lt input ng-model  searchText  gt  lt  div gt                                   lt div class  table-heading  gt                                      lt div class  table-col  gt Customer ID lt  div gt                                   lt div class  table-col  ng-click  vm openDialog c CustomerId   gt   c CustomerId   lt  div gt                  timeout function                  var linkingFunction    compile tableContent               var elem   linkingFunction  scope                   You can then use the DOM element like normal              jQuery tablePanel  append elem                console log  timeout              100

User · Answer

Also worth noting  for people who find this in their searches  is this      lt div ng-repeat  button in buttons  class  bb-button  ng-click  goTo button path   gt     lt div class  bb-button-label  gt    button label    lt  div gt     lt div class  bb-button-description  gt    button description    lt  div gt   lt  div gt    Note the value of ng-click   The parameter passed to goTo   is a string from a property of the binding object  the button   but it is not wrapped in quotes   Looks like AngularJS handles that for us   I got hung up on that for a few minutes

User · Answer

Here is the ng repeat with ng click function and to append with slider   lt script gt  var app   angular module  MyApp               app controller  MyController   function   scope             scope employees                    id    001    name    Alpha    joinDate    05 17 2015    age   37                   id    002    name    Bravo    joinDate    03 25 2016    age   27                   id    003    name    Charlie    joinDate    09 11 2015    age   29                   id    004    name    Delta    joinDate    09 11 2015    age   19                   id    005    name    Echo    joinDate    03 09 2014    age   32                            This will hide the DIV by default                   scope IsVisible   false               scope ShowHide   function                        If DIV is visible it will be hidden and vice versa                   scope IsVisible    scope IsVisible   false   true                             lt  script gt   lt  head gt    lt body gt    lt div class  container  ng-app  MyApp  ng-controller  MyController  gt   lt input type  checkbox  value  checkbox1  ng-click  ShowHide      gt  checkbox1  lt div id  mixedSlider  gt                       lt div class  MS-content  gt                           lt div class  item   ng-repeat  emps in employees   ng-show    IsVisible  gt                             lt div class  subitem  gt           lt p gt   emps id   lt  p gt           lt p gt   emps name   lt  p gt           lt p gt   emps age   lt  p gt           lt  div gt                           lt  div gt                         lt  div gt                       lt div class  MS-controls  gt                           lt button class  MS-left  gt  lt i class  fa fa-angle-left  aria-hidden  true  gt  lt  i gt  lt  button gt                           lt button class  MS-right  gt  lt i class  fa fa-angle-right  aria-hidden  true  gt  lt  i gt  lt  button gt                       lt  div gt                   lt  div gt   lt  div gt   lt script src  https   code jquery com jquery-1 12 4 min js  gt  lt  script gt    lt script src  js multislider js  gt  lt  script gt    lt script gt               mixedSlider   multislider               duration  750              interval  false              lt  script gt

User · Answer

Instead of    lt button ng-click  removeTask   task id     gt remove lt  button gt    do this    lt button ng-click  removeTask task id   gt remove lt  button gt    Please see this fiddle   http   jsfiddle net JSWorld Hp4W7 34

User · Answer

One thing that really hung me up  was when I inspected this html in the browser  instead of seeing it expanded to something like    lt button ng-click  removeTask 1234   gt remove lt  button gt    I saw    lt button ng-click  removeTask task id   gt remove lt  button gt    However  the latter works    This is because you are in the  Angular World   when inside ng-click    Angular all ready knows about task id as you are inside it s model  There is no need to use Data binding  as in        Further  if you wanted to pass the task object itself  you can like    lt button ng-click  removeTask task   gt remove lt  button gt

[angularjs] Adding parameter to ng-click function inside ng-repeat doesn't seem to work

Examples related to angularjs

Examples related to ng-repeat

Examples related to angularjs-ng-click