Question

我已经创建了一个简单的表，因为这个表从控制器获取数据。
这里我试图添加S.no，但我不知道该怎么做。 /> 现在我只是从后端显示{{x.id}} s.no，我不想将{{x.id}}显示为序列号，但我需要在更新方法中传递它。
任何人都可以教我如何在角度中添加serial numbers吗？

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>

Answer 1

最简单的解决方案： 您可以在td元素中添加{{$ index}}来执行此操作。

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

替代解决方案： 或者你也可以将序列号无键推入阵列。

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

并在UI中填充

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

使用角度js动态地在表中添加角色编号

1 个答案: