获取ng-repeat中的行索引(或id)以对特定行执行某些操作

时间:2015-10-02 17:24:45

标签: javascript angularjs

我是角色的新手,我想得到特定行的索引来执行函数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);
                  });  

            };

1 个答案:

答案 0 :(得分:2)

您可以使用$ 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);
              });  

        };