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>

我正在获取表数据，但是如何使用angular来动态添加按钮（对于我需要在action列中添加按钮的每一行）表数据？
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进行操作，例如：

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

如何动态添加角度按钮

2 个答案: