javascript 克隆 angularjs 中的元素
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/20367115/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Clone elements in angularjs
提问by Thang Nguyen
I need to duplicate some input fields in order to handle data from clients. I have done it with jQuery http://jsfiddle.net/m7R3f/1/
我需要复制一些输入字段以处理来自客户端的数据。我已经用 jQuery http://jsfiddle.net/m7R3f/1/完成了
HTML:
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>
JS
JS
$(document).ready(function ()
{
$("#add").click(function ()
{
$(".entry:first").clone(false).appendTo("#fields-list");
});
});
However I just start learning Angular and want to convert these code to Angular. I have read questions in stackoverflow and found the code with angularjs here: http://jsfiddle.net/roychoo/ADukg/1042/. However, it seem works only for ONE input field? Can I clone/duplicate several input fields using AngularJS? (in other word: convert my code above into AngularJS version?) Thank you very much.
但是，我刚刚开始学习 Angular，并想将这些代码转换为 Angular。我已经阅读了 stackoverflow 中的问题，并在这里找到了带有 angularjs 的代码：http: //jsfiddle.net/roychoo/ADukg/1042/。但是，它似乎只适用于一个输入字段？我可以使用 AngularJS 克隆/复制多个输入字段吗？（换句话说：将我上面的代码转换成 AngularJS 版本？）非常感谢。
回答by Vladyslav Babenko
If you want to clone html element, the best way to use ng-repeat directive.
如果要克隆 html 元素，最好使用 ng-repeat 指令。
Your Controller
您的控制器
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 prevents of creation duplicated elements, to avoid this, use track bylike in the example
Angular 防止创建重复元素，为避免这种情况，请track by在示例中使用
回答by Darryl
You should create an array and use ng-repeatin your HTML. Each object in the array can contain the data necessary to populate your divs. If you want to start with three entries, then add the data for those three. If you want to add more, then simply push onto the array. Because of Angular's 2-way data binding your form field will appear once the element is pushed onto the array.
您应该创建一个数组并ng-repeat在您的 HTML 中使用。数组中的每个对象都可以包含填充 div 所需的数据。如果您想从三个条目开始，请添加这三个条目的数据。如果您想添加更多，只需将其推入阵列即可。由于 Angular 的 2 向数据绑定，一旦将元素推送到数组上，您的表单字段就会出现。
For more details on how to do this, checkout the To Do example on Angular's home page.
有关如何执行此操作的更多详细信息，请查看 Angular 主页上的 To Do 示例。
回答by yashhy
How about this(Fiddle)
add two more ng-modeland push those models
再添加两个ng-model并推送这些模型
$scope.add = function(){
$scope.items.push($scope.newitem1,$scope.newitem2,$scope.newitem3);
}
