javascript - 如何在 Angular js中将一个表行移动到另一个表？

Question

我想通过单击按钮将行移动到另一个表。点击向上按钮将第 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

Answer 1

将元素从 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]);