我需要复制一些输入字段才能处理来自客户端的数据。我已经用 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>
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 版本？) 非常感谢。
最佳答案
如果你想克隆 html 元素，最好的方法是使用 ng-repeat 指令。
你的 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 会阻止创建重复的元素，为了避免这种情况，请像示例中那样使用 track by
关于javascript - AngularJS 中的克隆元素，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/20367115/