Add role numbers in table dynamically using angular js

Question

I have created one simple table,for this table am getting data from controller.
Here I am trying to add S.no , But I don't know how to do it.
For now am just displaying {{x.id}} as s.no from backend,I dont want to display {{x.id}} as serial number but I need to pass it inside update method.
Can anyone teach me how to add serial numbers in angular?

HTML:

<body ng-app="intranet_App">
    <div class="container">
            <div class="table-responsive">
                <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>
                                <span ng-hide="editMode">{{x.name}}</span>
                                <input type="text" ng-show="editMode" ng-model="x.name" />
                            </td>
                            <td>
                                <i class="edit fa fa-pencil-square-o" id="edit{{x.Id}}" ng-click="editMode = true;edit(x.Id)" ng-hide="editMode"></i>
                                <i class="update fa fa-floppy-o" id="update{{x.Id}}" ng-hide="true" ng-show="editMode" ng-click="update(x.name,x.Id);editMode = false"></i>
                                <i class="editCancel fa fa-times" id="editCancel{{x.Id}}" ng-click="editMode = false" ng-hide="true" ng-show="editMode"></i>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
    </div>
</body>

SCRIPT:

<script>
    var app=angular
                .module("intranet_App", [])
                .controller('myCtrl', function ($scope, $http) {
                    $scope.updateItem = [];
                    $scope.updatedList = function (val,id) {
                        $scope.updateItem.push(val,id);
                        $scope.json = angular.toJson(val,id);
                        if ($scope.json) {
                            $scope.json = { "name": val,"id":id }
                        }
                        console.log($scope.json)
                    }
                    $http.post("/Admin/getRolesList")
                    .then(function (response) {                     
                        $scope.roleList = response.data;
                    });
                    //$scope.edit=function(val){
                    //    $scope.editing = $scope.items.indexOf(val);
                    //}
                    $scope.update = function (val, id) {
                        $scope.updatedList(val,id);
                        var requestHeaders = {
                            "Content-type" : 'application/json'
                        }
                        var httpRequest={
                            method:'post',
                            url: '/Admin/RoleUpdate',
                            headers: requestHeaders
                        };
                        httpRequest.data = $scope.json;
                        $http(httpRequest).then(function (response) {
                            alert("success")
                        })

                    }
                    $scope.cancel = function (val) {

                    }
                })
</script>

Use track by $index and display {{$index}} in your tab

Zooly
– Zooly

2017-06-06 09:38:58 +00:00
Commented Jun 6, 2017 at 9:38 — Zooly
– Zooly, Commented Jun 6, 2017 at 9:38
you can use $index, as : <td>{{$index}}</td>

anoop
– anoop

2017-06-06 09:39:10 +00:00
Commented Jun 6, 2017 at 9:39 — anoop
– anoop, Commented Jun 6, 2017 at 9:39

Vivz · Accepted Answer · 2017-06-06 09:57:33Z

Easiest Solution: You can simply add {{$index}} in your td element to do this.

                <tr ng-repeat="x in roleList | filter:searchText">
                    <td>{{$index + 1}}</td>
                    <td>
                        <span ng-hide="editMode">{{x.name}}</span>
                        <input type="text" ng-show="editMode" ng-model="x.name" />
                    </td>
                    <td>
                        <i class="edit fa fa-pencil-square-o" id="edit{{x.Id}}" ng-click="editMode = true;edit(x.Id)" ng-hide="editMode"></i>
                        <i class="update fa fa-floppy-o" id="update{{x.Id}}" ng-hide="true" ng-show="editMode" ng-click="update(x.name,x.Id);editMode = false"></i>
                        <i class="editCancel fa fa-times" id="editCancel{{x.Id}}" ng-click="editMode = false" ng-hide="true" ng-show="editMode"></i>
                    </td>
                </tr>

Alternative Solution: Or you can push a serial no key into your array likewise.

$http.post("/Admin/getRolesList")
.then(function (response) {                     
 $scope.roleList = response.data;
 for(var i=0;i<$scope.roleList.length;i++)
  $scope.roleList[i].serialNo = i+1;
            });

And populate it in the UI like

 <tr ng-repeat="x in roleList | filter:searchText">
                            <td>{{x.serialNo}}</td>
                            <td>
                                <span ng-hide="editMode">{{x.name}}</span>
                                <input type="text" ng-show="editMode" ng-model="x.name" />
                            </td>
                            <td>
                                <i class="edit fa fa-pencil-square-o" id="edit{{x.Id}}" ng-click="editMode = true;edit(x.Id)" ng-hide="editMode"></i>
                                <i class="update fa fa-floppy-o" id="update{{x.Id}}" ng-hide="true" ng-show="editMode" ng-click="update(x.name,x.Id);editMode = false"></i>
                                <i class="editCancel fa fa-times" id="editCancel{{x.Id}}" ng-click="editMode = false" ng-hide="true" ng-show="editMode"></i>
                            </td>
                        </tr>

Collectives™ on Stack Overflow

Add role numbers in table dynamically using angular js

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related