選択したテーブルの位置を変更する方法

Question

選択可能なテーブルを作成しようとしています。行の位置を変更する前に、その行を選択する必要があります。

どうすればいいですか？ここで

は私が持っているものです：

あなたは単に選択されたインデックスと利用ngのクラスを保存し、選択した行を更新するために、NG-クリックなどにロジックを追加することができます

angular.module("tableMoveUpDown",[]).component("tableMoveUpDown", { 
 
\t templateUrl: "./js/componente/table-move-up-down/table-move-up-down.template.html", 
 
\t controller: function($scope){ 
 
     $scope.items = [ 
 
      { title: "Alvaro" }, 
 
      { title: "Juan" }, 
 
      { title: "Pedro" }, 
 
      { title: "David" }, 
 
      { title: "Walter" }, 
 
     ]; 
 

 
     var move = function (origin, destination) { 
 
      var temp = $scope.items[destination]; 
 
      $scope.items[destination] = $scope.items[origin]; 
 
      $scope.items[origin] = temp; 
 
     }; 
 

 
     $scope.moveUp = function(index){ 
 
      move(index, index - 1); 
 
     }; 
 

 
     $scope.moveDown = function(index){ 
 
      move(index, index + 1); 
 
     }; 
 
    } 
 
})

<div> 
 

 
    <table class="table table-bordered table-striped table-hover table-condensed"> 
 
    <thead><th>Index</th><th>Amigos</th><th>Función Subir</th><th>Función Bajar</th></thead> 
 
    <tr ng-repeat="item in items"> 
 
     <td>{{$index}}</td> 
 
     <td>{{item.title}}</td> 
 
     <td><span ng-show="!$first" ng-click="moveUp($index)" 
 
       class="glyphicon glyphicon-arrow-up">Subir</span></td> 
 
     <td><span ng-show="!$last" ng-click="moveDown($index)" 
 
       class="glyphicon glyphicon-arrow-down">Bajar</span></td> 
 
    </tr> 
 
    </table> 
 

 
</div>

Answer 1

移動機能作業例：https://plnkr.co/edit/0375uuVKWSO0rxt6eN1n?p=preview

コンポーネントJS

angular.module("tableMoveUpDown", []).component("tableMoveUpDown", { 
    templateUrl: "tablecomp.html", 
    controller: function($scope) { 
    $scope.items = [{ 
     title: "Alvaro" 
    }, { 
     title: "Juan" 
    }, { 
     title: "Pedro" 
    }, { 
     title: "David" 
    }, { 
     title: "Walter" 
    }, ]; 

    $scope.selectedIndex = 0; 

    var move = function(origin, destination) { 
     if (origin != $scope.selectedIndex) 
     return; 
     var temp = $scope.items[destination]; 
     $scope.items[destination] = $scope.items[origin]; 
     $scope.items[origin] = temp; 
    }; 

    $scope.moveUp = function(index) { 
     move(index, index - 1); 
    }; 

    $scope.moveDown = function(index) { 
     move(index, index + 1); 
    }; 
    } 
}) 

コンポーネントHTML

<div> 

    <table class="table table-bordered table-striped table-hover table-condensed"> 
    <thead> 
     <th>Index</th> 
     <th>Amigos</th> 
     <th>Función Subir</th> 
     <th>Función Bajar</th> 
    </thead> 
    <tr ng-repeat="item in items" ng-click="$parent.selectedIndex = $index" ng-class="{'selected': $index === $parent.selectedIndex}"> 
     <td>{{$index}}</td> 
     <td>{{item.title}}</td> 
     <td><span ng-show="!$first" ng-click="moveUp($index)" class="glyphicon glyphicon-arrow-up">Subir</span></td> 
     <td><span ng-show="!$last" ng-click="moveDown($index)" class="glyphicon glyphicon-arrow-down">Bajar</span></td> 
    </tr> 
    </table> 

</div>