获取ng-repeat中的row's索引(或id),以便对特定行执行一些操作

Get row's index (or id) inside ng-repeat to do some actions on a specific row

本文关键字:操作 执行 id row 中的 ng-repeat 索引 获取      更新时间:2023-09-26

我是新的角度,我想获得特定行的索引来执行函数hidestuff(),我将item.id传递给函数,我想隐藏包含此id的行。但是我如何传递行索引来删除整个行呢?

html:

                  <tr ng-repeat="item in ItemsByPage[currentPage]">
                        <td>
                          <div  ng-model="tid" 
                                ng-hide="hidden" 
                                ng-class="{fade: startFade}"> 
                               {{item.id}} 
                          </div>                                
                        </td>
                        <td>
                           <div editable-text="item.name" 
                                onaftersave='inlineupdateName(item.id,item.name)' 
                                ng-model="tname" data-n='item.name'>
                                {{item.name}}
                           </div>
                        </td>
                        <td>
                           <div editable-text="item.phone" 
                                 onaftersave='inlineupdatephone(item.id,item.phone)'
                                 ng-model="tphone">
                                 {{item.phone}}
                            </div>
                        </td>
                    </tr>
                <input  type="text" ng-model="delId"   class="form-control" 
                         placeholder="Enter user id to delete th user">                        
                <button ng-click="deleteuser(delId)"  type="button" 
                        class="btn btn-primary">
                        Delete User
                </button> 

js:

$scope.hideStuff = function (delId) {
                $scope.startFade = true;
                 //here i want to use the index to delete the row
                $scope.hidden = true;
            };
            $scope.deleteuser = function (dalId) {                   
                var data = {delId : $scope.delId};
                $http.post('delete.php', data )
                  .success(function(response) {
                    $scope.hideStuff(delId);
                  });  
            };

你可以使用$index。https://docs.angularjs.org/api/ng/directive/ngRepeat

我认为你应该这样做:

            <tr id="tr-{{item.id}}" ng-repeat="item in ItemsByPage[currentPage]">
                    <td>
                      <div> 
                           {{item.id}} 
                      </div>                                
                    </td>
                    <td>
                       <div editable-text="item.name" 
                            onaftersave='inlineupdateName(item.id,item.name)' 
                            ng-model="tname" data-n='item.name'>
                            {{item.name}}
                       </div>
                    </td>
                    <td>
                       <div editable-text="item.phone" 
                             onaftersave='inlineupdatephone(item.id,item.phone)'
                             ng-model="tphone">
                             {{item.phone}}
                        </div> 
                    </td>
                </tr>
             <input  type="text" ng-model="delId"   class="form-control" 
                     placeholder="Enter user id to delete th user">                        
            <button ng-click="deleteuser(delId)"  type="button" 
                    class="btn btn-primary">
                    Delete User
            </button> 

js

        $scope.hideStuff = function (delId) { 
            $("#tr-"+delId).hide();
            //the entire tr (line table) will be hidden.
            // you don't need those $scope variables to hide the elements
        };
        $scope.deleteuser = function (dalId) {                   
            var data = {delId : $scope.delId};
            $http.post('delete.php', data )
              .success(function(response) {
                $scope.hideStuff(delId);
              });  
        };