Javascript 使用angularjs进行动态函数调用

我有一系列的

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

从这个数组中，我需要形成一个名为a/B/C/D的列表，其中按钮为accept。单击此accept按钮时，应调用accept函数

我试过了

 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');
  }

var列表\u邀请=“”；
list_Invitation=“
”；
var i=1；
for（邀请列表中的var指数）
{
i++；
list_Invitation=list_Invitation+'
'+InvitationList[index]+'
'；
}
列表邀请=列表邀请+“
”；
$scope.acceptInvitation=函数（名称、id）
{
log（'Invoked'）；
}

将显示列表，但单击按钮时无法调用该函数

有人能帮我解决这个问题吗？

角度的方法是

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

---

演示：

控制台中有错误吗？控制台中没有错误。好的，最终的html是什么样子的？当您应该使用ng repeat时，为什么要使用dom操纵。。。如果您创建自己的dom，那么您将不得不编译结构+1，这非常好，但是OP询问了动态function@RameshRajendran是的，这是标题。。。但是从应该调用accept函数的问题来看，我认为OP只是创建了dom结构并将其附加到dom中，而没有编译它。。。所以ng click没有被调用Kay，我将在本地进行测试，并为OP提供解决方案， cool@RameshRajendran您始终可以使用附带的小提琴来测试cases@Vinod-当原来的问题解决后，最好问一个新问题-这将增加回答的可能性，因为只有我会看到这个问题

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

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