添加角色號碼錶使用動態的角度JS

我已創建了一個簡單的表，該表是從控制器獲取數據。
這裏我試圖添加S.no，但我不知道該怎麼做。
現在我只是從後端顯示{{x.id}}爲s.no，我不想顯示{{x.id}}序列號，但我需要通過它的更新方法裏面。
任何人都可以教我如何添加serial numbers角？添加角色號碼錶使用動態的角度JS

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>

來源

2017-06-06 user7397787

使用'''軌道由$ index'''和顯示{{$指數}}在標籤 – Zooly

的UI來填充它，你可以用'$ index' ，如：'{{$ index}}' – anoop

最簡單的辦法： 你可以簡單地在你的TD元素要做到這一點添加{{$指數}}。

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

而且在像

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

來源

2017-06-06 09:57:33 Vivz

添加角色號碼錶使用動態的角度JS

回答

相關問題