javascript动态添加按钮,同时动态添加文本框
我有以下JSFIDLE代码:
http://jsfiddle.net/rnnb32rm/285/
<div ng-app="angularjs-starter" ng-controller="MainCtrl">
<fieldset data-ng-repeat="choice in choicesA">
<input type="text" ng-model="choice.name" name="" placeholder="Enter name">
<button class="addfields" ng-click="addNewChoice()">Add fields</button>
<button class="remove" ng-click="removeChoice()">-</button>
</fieldset>
<div id="choicesDisplay">
{{ choicesA }} <br/>
{{ choicesB }}
</div>
</div>
JS:
var app = angular.module('angularjs-starter', []);
app.controller('MainCtrl', function($scope) {
$scope.choicesA = [{id: 'choice1'}, {id: 'choice2'}];
$scope.choicesB = [];
$scope.addNewChoice = function() {
var newItemNo = $scope.choicesA.length+1;
$scope.choicesA.push({'id':'choice'+newItemNo});
};
$scope.removeChoice = function() {
var lastItem = $scope.choicesA.length-1;
$scope.choicesA.splice(lastItem);
};
});
如您所见,我有一个函数addNewChoice()
,它将对象添加到数组choicesA
,然后根据choicesA
数组上的对象编号添加文本框
只有当我单击第一个{Add fields
按钮也是如此(因此每个Add field
按钮只能将文本框添加到自己的fieldset
标记),这也会根据choicesA
数组中的对象数生成
我什么都试过了,就是想不出来。如果有点不清楚,我可以解释得更多。提前谢谢你
编辑:感谢大家的大力帮助,让我解释一下:
我有一个springrestapi和两个名为Resource&;操作,对象资源包含操作列表,操作包含对资源的引用
当我加载一个页面时,我得到一个Resource
对象数组,这些对象是我已经保存的,通过$http从数据库返回的。get()方法,名为choicesA
,数组结构如下:
[
{"idResource":1, "nameResource": "resName1"},
{"idResource":2, "nameResource": "resName2"}
......etc depends oh how much rows I got from the DB
]
我有另一个方法,$http。post()用于发布名为choicesB
的Action
对象数组,该数组是一个独立的非嵌套数组。数组结构如下所示:
[
{"idAction":1, "nameAction":"nameAction1", "resource":
{"idResource":1, "nameResource": "resName1"},
{"idAction":2, "nameAction":"nameAction2", "resource":
{"idResource":2, "nameResource": "resName2"},
..
}
{...},
{...}
...
]
因此choicesA
数组包含我使用$http获得的Resource
对象。get(),然后我想填充choicesB
数组中的Action
对象,然后使用$http保存数组。post(),每个Action
应该包含一个Resource
对象。例如,如果我单击在第一个fieldset
标记中添加更多操作,意味着我希望填充choicesB
数组中的第一个Action
对象,并将位于choicesA
数组中的第一个Resource
对象分配给它
我希望能够确定操作的数量并填写它们,然后将它们保存到choicesB
数组中。但是每个动作都与我描述的特定Resource
对象相关
我希望现在清楚了,对不起&;再次感谢你
# 1 楼答案
也许我误解了你的问题。也许这会帮助你解决问题
关于jsfiddle的实时示例
已更新
关于jsfiddle的实时示例