current community

your communities

more stack exchange communities

company blog
Stack Exchange Inbox Reputation and Badges
tour help
stack overflow careers
Sign up ×
Stack Overflow is a community of 4.7 million programmers, just like you, helping each other. Join them, it only takes a minute:
up vote 1 down vote favorite

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?

share|improve this question
    
do you get any errors in the console? – Andrew Douglas Mar 4 '14 at 4:52
    
There is no error in console. – Vinod Mar 4 '14 at 4:53
    
ok, what does final html look like? – Andrew Douglas Mar 4 '14 at 4:54
    
Final Html – Vinod Mar 4 '14 at 4:59
    
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 Mar 4 '14 at 4:59

1 Answer 1

up vote 1 down vote accepted

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

share|improve this answer
1  
+1, It's really good, But the OP asked about dynamic function – Ramesh Rajendran Mar 4 '14 at 5:05
    
@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 – Arun P Johny Mar 4 '14 at 5:07
    
Okay, I will test this locally and will give solution to OP, cool – Ramesh Rajendran Mar 4 '14 at 5:08
    
@RameshRajendran you can always use the attached fiddle to test the cases – Arun P Johny Mar 4 '14 at 5:09
1  
@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 – Arun P Johny Mar 6 '14 at 8:43

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.