Question

我正在尝试制作一个可选择的表格。在连续更改位置之前，必须选择该行。

我该怎么做？

这就是我所拥有的：

angular.module("tableMoveUpDown",[]).component("tableMoveUpDown", {
	templateUrl: "./js/componente/table-move-up-down/table-move-up-down.template.html",
	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

您可以简单地保存所选索引并使用ng-class和ng-click更新所选行以及向移动功能添加逻辑。工作示例：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>

如何更改所选表格的位置

1 个答案: