마지막 행 만들기 NON sortable

Question

내 각도 프로젝트에서 테이블 행을 정렬 할 수 있지만 정렬 행에도 query-ui 코드 요소가 포함되어 있으며 마지막 행을 정렬 할 수 없게되었습니다.

HTML

<div ng:controller="controller"> 
    <table style="width:auto;" class="table table-bordered"> 
     <thead> 
      <tr> 
       <th>Index</th> 
       <th>Count</th> 
      </tr> 
     </thead> 
     <tbody ui:sortable ng:model="list"> 
      <tr ng:repeat="item in list" class="item" style="cursor: move;"> 
       <td>{{$index}}</td> 
       <td>{{item}}</td> 
      </tr> 
      <tr> 
       <td>Non Sortable</td> 
       <td>Non Sortable</td> 
      </tr> 
     </tbody>{{list}} 
     <hr> 
</div> 

컨트롤러

다음

var myapp = angular.module('myapp', ['ui']); 

myapp.controller('controller', function ($scope) { 
    $scope.list = ["one", "two", "thre", "four", "five", "six"]; 
}); 

angular.bootstrap(document, ['myapp']); 

하는 JsFiddle 노력하고 있습니다 :

http://jsfiddle.net/valor_/fc7oftkn/가 어떻게 마지막 행이 아닌 정렬을 만들 수 있습니까? 추가 정보가 필요한 경우 알려 주시면 제공해 드리겠습니다. 미리 감사드립니다.

Answer 1

아래와 같이 <tfoot>으로 이동하십시오.

<table style="width:auto;" class="table table-bordered"> 
    <thead> 
    <tr> 
     <th>Index</th> 
     <th>Count</th> 
    </tr> 
    </thead> 
    <tbody ui:sortable ng:model="list"> 
    <tr ng:repeat="item in list" class="item" style="cursor: move;"> 
     <td>{{$index}}</td> 
     <td>{{item}}</td> 
    </tr> 

    </tbody>{{list}} 
    <tfoot> 
    <tr> 
     <td>Non Sortable</td> 
     <td>Non Sortable</td> 
    </tr> 
    </tfoot> 
</table>