Tha*_*yen 2 javascript jquery angularjs
我需要复制一些输入字段以处理来自客户端的数据.我用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指令的最佳方法.
你的控制器
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在示例中使用
| 归档时间： |
|
| 查看次数： |
15462 次 |
| 最近记录： |