How to dynamically add buttons in angular

Question

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>

You can add this element to get button in your 3rd column <td><button>Add</button></td> — NKDev
– NKDev, Commented May 31, 2017 at 10:41

tommybernaciak · Accepted Answer · 2017-05-31 10:37:16Z

1

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>

answered May 31, 2017 at 10:37

tommybernaciak

3902 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

user7397787 Over a year ago

Is it possible to initialize like i=0 and to use iteration of i in every button.

NKDev Over a year ago

you can use $index for iteration docs.angularjs.org/api/ng/directive/ngRepeat

Chifilly · Accepted Answer · 2017-05-31 10:42:45Z

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

can you please check here edit(x.Id)...is this correct syntax?
It is, because inside ng-click it uses plain JavaScript, so you can directly use the x variable from the ng-repeat and access its properties, so this will call a function edit with whatever value x.Id has. Just make sure that there is a function called edit in the scope

Collectives™ on Stack Overflow

How to dynamically add buttons in angular

2 Answers 2

2 Comments

2 Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

2 Comments

Related