在angularjs中克隆元素答案

【问题标题】：Clone elements in angularjs在angularjs中克隆元素
【发布时间】：2013-12-04 04:52:59
【问题描述】：

我需要复制一些输入字段以处理来自客户端的数据。我已经用 jQuery http://jsfiddle.net/m7R3f/1/

完成了

HTML：

<fieldset id="fields-list">
<div class="pure-g entry">
    <div class="pure-u-1-5">
        <input type="text" class="pure-input-1" id="input-1" name="input-1">
    </div>
    <div class="pure-u-1-5">
        <input type="text" class="pure-input-1" id="date" name="date">
    </div>
    <div class="pure-u-1-5">
        <input type="text" class="pure-input-1" id="input-2" name="input-2">
    </div>
</fieldset>
<button id="add">Add</button>

$(document).ready(function ()
{
    $("#add").click(function ()
    {
        $(".entry:first").clone(false).appendTo("#fields-list");
    });
});

但是我刚开始学习 Angular 并想将这些代码转换为 Angular。我已经阅读了 stackoverflow 中的问题，并在这里找到了带有 angularjs 的代码：http://jsfiddle.net/roychoo/ADukg/1042/。但是，它似乎只适用于一个输入字段？我可以使用 AngularJS 克隆/复制几个输入字段吗？（换句话说：将我上面的代码转换成 AngularJS 版本？）非常感谢。

【问题讨论】：

请保持输入字段中的 ID 唯一！
如果需要，我会删除 ID。只想使用 Angular 复制整个类条目

标签： javascript jquery angularjs

【解决方案1】：

如果要克隆 html 元素，最好使用 ng-repeat 指令。

你的控制器

var App = angular.module('App', []).controller('Test', ['$scope',
  function($scope) {

    $scope.inputCounter = 0;
    $scope.inputs = [{
      id: 'input'
    }];
    $scope.add = function() {
      $scope.inputTemplate = {
        id: 'input-' + $scope.inputCounter,
        name: ''
      };
      $scope.inputCounter += 1;
      $scope.inputs.push($scope.inputTemplate);
    };

  }
])

<!DOCTYPE html>
<html ng-app="App">

<head lang="en">
  <meta charset="UTF-8">
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
</head>

<body ng-controller="Test">
  <fieldset id="fields-list">
    <div class="pure-g entry" ng-repeat="input in inputs track by input['id']">
      <div class="pure-u-1-5">
        <input type="text" class="pure-input-1" id="input" name="input-1">
      </div>
      <div class="pure-u-1-5">
        <input type="text" class="pure-input-1" id="date" name="date">
    </div>
    <div class="pure-u-1-5">
        <input type="text" class="pure-input-1" id="input-2" name="input-2">
    </div>
    </div>
  </fieldset>
  <button type="button" id="add" ng-click="add()">Add</button>

</body>

</html>

Angular 防止创建重复元素，为避免这种情况，请像示例中一样使用 track by

【讨论】：

【解决方案2】：

您应该创建一个数组并在 HTML 中使用 ng-repeat。数组中的每个对象都可以包含填充 div 所需的数据。如果您想从三个条目开始，则添加这三个条目的数据。如果您想添加更多，则只需推入阵列。由于 Angular 的 2 路数据绑定，一旦元素被推送到数组上，您的表单字段就会出现。

有关如何执行此操作的更多详细信息，请查看 Angular 主页上的待办事项示例。

【讨论】：

【解决方案3】：

this(Fiddle)怎么样

再添加两个ng-model 并推送这些模型

$scope.add = function(){
        $scope.items.push($scope.newitem1,$scope.newitem2,$scope.newitem3); 
}

【讨论】：