Question

我想选择一个HTML元素，然后使用 Angular2 点击按钮将其附加到另一个div。启动HMTL

<div class="parent">
<ul class="level1">
    <li>
        <div class="otherdiv">
            This is a test
            <button md-raised-button type="button" color="primary">Clone</button>
        </div>
    </li>
</ul>

单击按钮时，我希望有以下结构

<div class="parent">
<ul class="level1">
    <li>
        <div class="otherdiv">
            This is a test
            <button md-raised-button type="button" color="primary">Clone</button>
        </div>
        <ul class="level2">
            <li>
                <div class="otherdiv">
                    This is a test
                    <button md-raised-button type="button" color="primary">Clone</button>
                </div>
            </li>
        </ul>
    </li>
</ul>

不确定如何实现这一目标。任何帮助赞赏。感谢

Answer 1

您可以在jquery中使用clone()。

JSFIDDLE

以下是代码：

$('button').click(function() {
  $("#level1").clone().attr('id', 'level2').insertAfter("#level1");
});

<div class="parent">
  <ul id="level1">
    <li>
      <div class="otherdiv">
        This is a test
        <button md-raised-button type="button" color="primary">Clone</button>
      </div>
    </li>
  </ul>

使用angluarJs我们也可以使用ng-repeat来执行相同操作。您可以通过添加数字重复每次。

ANGULAR FIDDLE

var app = angular.module('myapp', []);
app.controller('ctrlParent', function($scope) {
  $scope.myNumber = 1;
  $scope.myFun = function() {
    $scope.myNumber = $scope.myNumber + 1;
  }
  $scope.getNumber = function(num) {
    return new Array(num);
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myapp">
  <div ng-controller="ctrlParent">
    <ul>
      <li ng-repeat="i in getNumber(myNumber) track by $index"><span>{{$index+1}}</span>
        <button ng-click="myFun()">Click to CLone
            </button>
      </li>
    </ul>
  </div>
</div>

AngularJS 2选择一个HTML元素，并在按钮单击时将其附加到另一个元素

1 个答案: