Question

让我们说我有两个div并排。（为了使用bootstrap进行参数，可以说它们都是6列）

如果我将对象拖到右侧的列中，然后单击该列下面的按钮，我希望左侧的列与右侧的列相同。（所以他们现在相同）

我知道我们可以通过双向绑定实时执行此操作，但我想知道是否可以在单击事件上调用双向绑定？我也研究了角度复制，但是我理解的文档很少。

   <div class="col-sm-12">

<div class="col-sm-6">
    <div class="col-sm-12 left_column">
        <p>{{master}}</p>
    </div>
</div>

<div class="col-sm-6">
    <div class="col-sm-8">
        <div class="col-sm-12 right_column">{{source}}</div>
        <button class="btn btn-primary" ng-click="update()">Submit Changes</button>
    </div>
    <div class="col-sm-4">
        <div class="col-sm-4 drag_item_1"></div>
        <div class="col-sm-4 drag_item_2"></div>
        <div class="col-sm-4 drag_item_3"></div>
    </div>
</div>

    angular.module('app', ['ui.router'])

   .config(['$urlRouterProvider', '$stateProvider', 
      function($urlRouterProvider, $stateProvider){
      $urlRouterProvider.otherwise('/');

$stateProvider.state('homepage', {
    url: "/",
    templateUrl: "templates/homepage.html"
  })
}])

.controller('swap_ctrl', function(){
$scope.source = "can it work?";
$scope.update = function() {
    angular.copy($scope.source, $scope.master);
};
  });

我知道上面的代码不起作用。这只是试图理解angular.copy的尝试。但它应该给你一个结构背后的想法。我只是想使用dragula来处理将对象拖到右列。

Answer 1

我不知道您的实际代码是怎样的，但我们假设您有两个代表您的列的数组：

$scope.columnsLeft = [...];
$scope.columnsRight = [...];

视图标记看起来像这样：

<div ng-repeat="column in columnsLeft track by $index"></div>
<div ng-repeat="column in columnsRight track by $index" ng-click="copyColumnToTheLeft(column, $index)"></div>

ng-click可能位于div元素内，可以应用于按钮。然后，复制我们的列的方法copyColumnToTheLeft可能如下所示：

$scope.copyColumnToTheLeft = function (column, index) {
   $scope.columnsLeft[index] = angular.copy(column);
};

Using angular.copy会创建传递给该方法的column副本，因此将来更改column（右侧数组）将不会立即显示左侧面板上的更改，因为它将是一个不同的对象。

希望这有帮助。

更新：在您的特定情况下，您将拥有2个阵列，一个是master，第二个是source：

$scope.master = [...];
$scope.source = [...];

如果您要使用dnd修改source数组，那么您的更新方法可能如下所示：

$scope.update (){ $scope.master = angular.copy($scope.source); };

无论如何good example of how it works is on the official docs page。

如何将一个元素复制到另一个具有角度遗留的元素？

1 个答案: