Dynamic function call with angularjs

Question

I have an array of

invitationList = ["A","B","C","D"]

from this array, I need to form a list having a name of A/B/C/D with button of accept. While clicking this accept button, accept function should be invoked.

I tried,

 var list_Invitation='';
 list_Invitation="<ul class='offline-invitation'>";
 var i = 1;
    for(var index in invitationList)
        {
        i++;
        list_Invitation=list_Invitation+'<li class="class_InvitationList"><h5>'+invitationList[index]+'</h5><input type="button" class="accept-btn" value="Accept" ng-click="acceptInvitation(\''+invitationList[index]+'\', \'accept-btn'+i+'\');"/></li>';
        }
            list_Invitation=list_Invitation+"</ul>";


$scope.acceptInvitation=function(name,id)
  {
      console.log('Invoked');
  }

List will be shown, but the function cannot be invoked while clicking the button.

Can anyone help me to resolve this?

why are you using dom manipulation when you should be using ng-repeat ... if you create your own dom then you will have to compile the structure — Arun P Johny
– Arun P Johny, Commented Mar 4, 2014 at 4:59

Arun P Johny · Accepted Answer · 2014-03-04 05:03:46Z

2

The angular way is

<ul class='offline-invitation'>
    <li class="class_InvitationList" ng-repeat="item in invitationList">
         <h5>{{item}}</h5>
        <input type="button" class="accept-btn" value="Accept" ng-click="acceptInvitation(item, $index)" />
    </li>
</ul>

then in your controller

$scope.invitationList = ["A", "B", "C", "D"];

$scope.acceptInvitation = function (name, id) {
    console.log('Invoked', name, id);
}

Demo: Fiddle

answered Mar 4, 2014 at 5:03

Arun P Johny

389k68 gold badges532 silver badges532 bronze badges

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

9 Comments

Ramesh Rajendran Over a year ago

+1, It's really good, But the OP asked about dynamic function

Arun P Johny Over a year ago

@RameshRajendran Yes that is the caption... but from the question accept function should be invoked, I think OP just created the dom structure and appended it to the dom without compiling it... so the ng-click is not getting invoked

Ramesh Rajendran Over a year ago

Okay, I will test this locally and will give solution to OP, cool

Arun P Johny Over a year ago

@RameshRajendran you can always use the attached fiddle to test the cases

Arun P Johny Over a year ago

@Vinod jsfiddle.net/arunpjohny/d8CD9/10 - as the original problem is solved it will be better to ask a new question - it will increase the possibility of an answer because only I will be seeing this question

|

Collectives™ on Stack Overflow

Dynamic function call with angularjs

1 Answer 1

9 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

9 Comments

Your Answer

Sign up or log in

Post as a guest

Related