克隆angularjs中的元素

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

HTML：

 
 
  
 
  
 
  
 
 Add 

JS

 $(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版本？）非常感谢。

Answer 1

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

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

Answer 2

如果要克隆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); }; } ]) 

        
 
 
  
 
  
 
  
 
 
 Add   

Answer 3

怎么样（小提琴）

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

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