Angularjs 使用angular js在表中动态添加角色号_Angularjs

Angularjs 使用angular js在表中动态添加角色号

angularjs

Angularjs 使用angular js在表中动态添加角色号,angularjs,Angularjs,我创建了一个简单的表，因为这个表是从控制器获取数据的。这里我试图添加S.no，但我不知道怎么做。现在我只是从后端将{{x.id}}显示为s.no，我不想将{{x.id}}显示为序列号，但我需要在更新方法中传递它。有人能教我如何在angular中添加序列号吗 HTML: <body ng-app="intranet_App"> <div class="container"> <div class="table-responsive"

我创建了一个简单的表，因为这个表是从控制器获取数据的。
这里我试图添加

S.no

，但我不知道怎么做。
现在我只是从后端将

{{x.id}}

显示为

s.no

，我不想将

{{x.id}}

显示为序列号，但我需要在更新方法中传递它。
有人能教我如何在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>


美国号
角色名
行动
{{x.Id}
{{x.name}

脚本：

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


var app=角度
.模块（“intranet_应用程序”，[]）
.controller（'myCtrl'，函数（$scope，$http）{
$scope.updateItem=[]；
$scope.updatedList=函数（val，id）{
$scope.updateItem.push（val，id）；
$scope.json=angular.toJson（val，id）；
if（$scope.json）{
$scope.json={“name”：val，“id”：id}
}
log（$scope.json）
}
$http.post（“/Admin/getRolesList”）
.then（函数（响应）{
$scope.roleList=response.data；
});
//$scope.edit=函数（val）{
//$scope.editing=$scope.items.indexOf（val）；
//}
$scope.update=函数（val，id）{
$scope.updatedList（val，id）；
var requestHeaders={
“内容类型”：“应用程序/json”
}
var-httpRequest={
方法：'post'，
url:“/Admin/RoleUpdate”，
标题：请求标题
};
httpRequest.data=$scope.json；
$http（httpRequest）.then（函数（响应）{
警惕（“成功”）
})
}
$scope.cancel=函数（val）{
}
})

最简单的解决方案： 只需在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>


{{$index+1}}
{{x.name}

替代解决方案： 或者，您也可以将串行no键按入阵列中

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

$http.post（“/Admin/getRolesList”）
.then（函数（响应）{
$scope.roleList=response.data；
对于（var i=0；iUsetrack by$index
并在选项卡中显示{{$index}}，您可以使用$index
，如下所示：{{$index}
 <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>