Как изменить положение на выбранном столе

Question

Как изменить положение на выбранном столе

0

Я пытаюсь сделать таблицу выбора. Перед изменением позиции в строке эта строка должна быть выбрана.

Как я могу это сделать?

Вот что я имею:

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>

Alvaro Enrique 25 июль 2016, в 22:30

Источник

0

Непонятно, о чем ты спрашиваешь. Пожалуйста, отредактируйте свой вопрос, чтобы более подробно объяснить, что вы хотели бы, а что нет.
isherwood 25 июль 2016, в 19:49

Теги:

javascript

angularjs

1 ответ

Ещё вопросы

Непонятно, о чем ты спрашиваешь. Пожалуйста, отредактируйте свой вопрос, чтобы более подробно объяснить, что вы хотели бы, а что нет.

10100111001 · Accepted Answer · 2016-07-25T19-21-00.000Z

Вы можете просто сохранить выбранный индекс и использовать 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>

@AlvaroEnrique Пожалуйста, отметьте как ответ, нажав на флажок рядом с этим ответом.