如何動態地添加按鈕角

Question

我創建爲我從控制器獲取數據的一個動態表，以前我是用jquery ajax加載表格內容

success: function (response) { 
for (var i = 0; i < List.length; i++) { 

        var table = '<tr id="' + List[i].Id + '"><td>' + (i + 1) + '</td><td id="name' + i + '">' + List[i].name + '</td><td><i class="edit fa fa-pencil-square-o" id="edit' + i + '"></i><i class="update fa fa-floppy-o" id="update' + i + '"></i><i class="editCancel fa fa-times" id="editCancel' + i + '" ></i></td><tr>'; 
        $('#content').append(table); 
        editUpdate(); 
       } 
} 

現在，我嘗試使用角度

同樣的事情

<script> 
    var app=angular 
       .module("intranet_App", []) 
       .controller('myCtrl', function ($scope, $http) { 
        $http.post("/Admin/getRolesList") 
        .then(function (response) {      
         $scope.roleList = response.data; 
         }); 
       }) 
</script> 

我正在獲取表數據，但如何動態地添加按鈕（對於每行我需要添加按鈕的動作列）使用角度的表數據？
HTML：

<table class="table table-hover table-bordered" id="mydata" ng-controller="myCtrl"> 
        <thead class="colorBlue"> 
         <tr> 
          <th>S.No</th> 
          <th>Role Name</th> 
          <th>Action</th> 
         </tr> 
        </thead> 
        <tbody id=""> 
         <tr ng-repeat="x in roleList | filter:searchText"> 
          <td>{{x.Id}}</td> 
          <td>{{x.name}}</td> 
         </tr> 
        </tbody> 
       </table> 

Answer 1

行

將創建動態通過使用ng-repeat基於的RoleList。如果用按鈕添加新欄目td，則會爲每一行添加它們。

<tbody id=""> 
    <tr ng-repeat="x in roleList | filter:searchText"> 
    <td>{{x.Id}}</td> 
    <td>{{x.name}}</td> 
    <td><button></button></td> 
    </tr> 
</tbody> 

Answer 2

<table class="table table-hover table-bordered" id="mydata" ng-controller="myCtrl"> 
    <thead class="colorBlue"> 
     <tr> 
      <th>S.No</th> 
      <th>Role Name</th> 
      <th>Action</th> 
     </tr> 
    </thead> 
    <tbody id=""> 
     <tr ng-repeat="x in roleList | filter:searchText"> 
      <td>{{x.Id}}</td> 
      <td>{{x.name}}</td> 
      <td> 
       <i class="edit fa fa-pencil-square-o" id="edit{{x.Id}}"></i> 
       <i class="update fa fa-floppy-o" id="update{{x.Id}}"></i> 
       <i class="editCancel fa fa-times" id="editCancel{{x.Id}}" ></i> 
      </td> 
     </tr> 
    </tbody> 
</table> 

然後對他們的點擊事件，你可以在他們做ng-click S，例如：

<td> 
    <i class="edit fa fa-pencil-square-o" id="edit{{x.Id}}" ng-click="edit(x.Id)"></i> 
    <i class="update fa fa-floppy-o" id="update{{x.Id}}" ng-click="update(x.Id)"></i> 
    <i class="editCancel fa fa-times" id="editCancel{{x.Id}}" ng-click="cancel(x.Id)"></i> 
</td>