Как переместить одну строку таблицы в другую таблицу в угловых JS?

0

Я хочу переместить строки в другую таблицу, нажав кнопку. нажатие на кнопку "вверх" перемещает 2-ю строку таблицы в 1-й и нажатие вниз перемещает 1-й стол на 2-й.

В HTML:

        <table class="table table-striped table-bordered table-hover">
            <thead>
                <tr>
                    <th>Tag Name</th>
                    <th>Status</th>
                    <th></th>
                </tr>
            </thead>
            <tbody>
                <tr ng-repeat="tag in vm.tags | filter: searchBar"
                    ng-init="selectedIndex = $index">
                    <td><span ng-click="vm.editTags(selectedIndex);"
                        tooltip="Click to edit tag">{{tag.name}}</span></td>
                    <td><span ng-click="vm.editTags(selectedIndex);"
                        tooltip="Click to edit tag">{{tag.status}}</span></td>
                    <td><span class="glyphicon glyphicon-remove change-color"
                        ng-click="vm.removeTag(selectedIndex)" tooltip="Delete tag">
                    </span></td>
                </tr>
            </tbody>
        </table>
    </div>

    <div class="top-bottom-padding col-sm-1">
        <button type="button" class="btn change-color bg-white">
            <span class="glyphicon glyphicon-arrow-down glyphicon-lg"></span>
        </button>
    </div>
    <br />
    <div class="top-bottom-padding col-sm-1">
        <button type="button" class="btn change-color bg-white">
            <span class="glyphicon glyphicon-arrow-up glyphicon-lg"></span>
        </button>
    </div>

        <div class="clear pull-right col-sm-1">
          <br/>
            <button ng-disabled="vm.selectedOrder.status == 'Activated'"
                class="pull-left btn btn-primary margin-Left"
                ng-click="vm.editStatus();">Activated</button>
            <button ng-disabled="vm.selectedOrder.status == 'Paused'"
                class="pull-left btn btn-primary margin-Left"
                ng-click="vm.editStatus();">Paused</button>
        </div>
    <div class="clear top-bottom-padding col-sm-1">
        <table class="table table-color table-bordered table-hover">
            <thead>
                <tr>
                    <th>Rotation Order</th>
                    <th>Tag Name</th>
                    <th>Status</th>
                </tr>
            </thead>
            <!-- ng-sortable - External component used for re-arranging rows of table -->
            <tbody ng-sortable="{animation:150}">
                <tr ng-repeat="orders in  vm.rotationTable"
                    ng-class="{selected : orders == vm.selectedOrder}"
                    ng-click="vm.setSelected(orders)">
                    <td>{{orders.rotationOrder}}</td>
                    <td>{{orders.tagName}}</td>
                    <td>{{orders.status}}</td>
                </tr>
            </tbody>
        </table>
</div>

в JS: -

// Code goes here



var myApp = angular.module('myApp',[]);
  myApp.controller('tagController', ['$scope',function ($scope) {

  var vm = this;  
  vm.tags = [
        {
            "name": "Tag A",
            "status": "Activated"
        },
        {
            "name": "Tag B",
            "status": "Paused"
        },
         {
             "name": "Tag C",
             "status": "Paused"
         },
         {
             "name": "Tag D",
             "status": "Activated"
         }
  ];
  vm.rotationTable = [
      {
          "rotationOrder": "1",
          "tagName": "Tag D",
          "status":"Activated"
      },
      {
          "rotationOrder": "2",
          "tagName": "Tag E",
          "status": "Paused"
      },
      {
          "rotationOrder": "3",
          "tagName": "Tag F",
          "status": "Activated"
      }
  ]
  vm.selectedOrder = null;
  vm.setSelected = function (order) {
      vm.selectedOrder = order;
      console.log(vm.selectedOrder);
  };

  vm.editStatus = function () {
      if (vm.selectedOrder.status == "Paused")
      {
          vm.selectedOrder.status = "Activated";
      }
      else if (vm.selectedOrder.status = "Activated")
      {
          vm.selectedOrder.status = "Paused";
      }
  };

     vm.addTags = function () {
      var modalInstance = $modal.open({
          templateUrl: './views/admin/addNewTag.html',
          controller: 'addNewTagController',
          controllerAs: 'vm',
          resolve: {
              tagsData: function () {
                  return vm.tags;
              }
          }
      });
  };


  vm.editTags = function (whichTag) {
      vm.whichTag = whichTag;
      var modalInstance = $modal.open({
          templateUrl: './views/admin/updateTag.html',
          controller: 'updateTagController',
          controllerAs: 'vm',
          resolve: {
              tagsData: function () {
                  return vm.tags;
              },
              whichTag: function () {
                  return vm.whichTag;
              }
          }
      });
  };      

  vm.removeTag = function (index) {
      vm.tags.splice(index, 1);
  };

 }]);

вы можете увидеть здесь mu-код: http://plnkr.co/edit/bsoTjFpJrEu3nG6cnjci?p=preview

  • 0
    что вы имеете в виду именно под move ? Данные имеют разные структуры в каждом массиве. Было бы тривиально, если бы они были одинаковой структуры
  • 0
    перемещение означает выбор одной строки из первой таблицы и нажатие на стрелку для отправки в другую таблицу в конце, как и наоборот. Да, если возможно, мы можем добавить идентификатор в таблицу тегов, чтобы сохранить ту же структуру данных.
Теги:

2 ответа

0 
in html:-
<button type="button" class="btn change-color bg-white" ng-click="vm.moveRight();">
  <span class="glyphicon glyphicon-arrow-right  glyphicon-lg"></span>
 </button>

<button type="button" class="btn change-color bg-white" ng-click="vm.moveLeft();">
    <span class="glyphicon glyphicon-arrow-left  glyphicon-lg"></span>
</button>

в js: -

vm.moveRight = function () {
             var selectedIndex = vm.selectedTag;
              vm.rotationTable.push(vm.selectedTag);
              vm.tags.splice(index,1);
             };

      vm.moveLeft = function () {
          var selectedIndex = vm.selectedOrder;// or any valid index from vm.tags
          vm.tags.push(vm.selectedOrder);//({ name: vm.tagsData.name, status: vm.tagsData.status });
          vm.rotationTable.splice(index, 1);
      };
Поделиться
0

Переместить элемент из vm.tags в vm.rotationTable вверху

var selectedIndex = 0;// or any valid index from vm.tags
vm.rotationTable.splice(0, 0, vm.tags.splice(selectedIndex, 1)[0]);

Переместить элемент из vm.rotationTable в vm.tags внизу

var selectedIndex = 0;// or any valid index from vm.rotationTable
vm.tags.splice(vm.tags.length - 1, 0, vm.rotationTable.splice(selectedIndex, 1)[0]);
Поделиться
  • 0
    Спасибо за ответ, но он работает не так, как я хочу. Я хочу, чтобы была выбрана одна строка, затем нажмите стрелку, чтобы перейти к следующей таблице.
  • 0
    @Pallavi, вы должны интегрироваться в любое мероприятие, которое вам нужно. Это не служба написания кода. Ответ показывает вам, как это сделать
Показать ещё 1 комментарий

Ещё вопросы

Сообщество Overcoder
Наверх
Меню