Clever Geek Handbook

Adding numbers to table dynamically with angular js

I created one simple table, for this table I am getting data from controller.
Here I am trying to add S.no

, but I don’t know how.
While I'm just showing {{x.id}}

how S.no

from the backend, I don't want to display {{x.id}}

as a serial number, but I need to pass it inside the update method.
Can anyone teach me how to add serial numbers

to 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>
+3


source to share


1 answer


Simplest solution: You can simply add {{$ index}} to 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 also push the serial key no to your array.



$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 fill 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>
+1


source






More articles:


All Articles