CODEWITHSUNDEEP
angularjs
user7397787
user7397787

Reputation: 1470

How to dynamically add buttons in angular

I am creating one dynamic table for that am getting data from controller, previously I was using jquery ajax to load table content

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

Now the same thing I trying using angular

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

I am getting table data ,but how to add buttons dynamically along with that(for each row i need to add buttons in action column)table data using angular?
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>

Upvotes: 0

Views: 2085

Answers (2)

Chifilly
Chifilly

Reputation: 316

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

Then to have click events on them, you can do ng-clicks on them, for example:

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

Upvotes: 1

tommybernaciak
tommybernaciak

Reputation: 390

Row will be created dynamically based on roleList by using ng-repeat. If you add new column td with button then they will be added for every row.

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

Upvotes: 1

Related Questions