添加按钮,动态也添加文本框,动态AngularJS
我有这样的jsfiddle代码:添加按钮,动态也添加文本框,动态AngularJS
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
数组上的对象编号添加文本框。
我需要文本框添加到第一fieldset
只有当我点击Add fields
按钮在第一fieldset
,并且我写上产生的那些文本框的数据被绑定并加入到单独的物体到choicesB
阵列。对于所有其他Add fields
按钮也是如此(因此每个Add field
按钮只能将文本框添加到其自己的fieldset
标记中),该标记也根据choicesA
数组中的对象数生成。
我尝试了一切,我只是想不出来。如果有点不清楚,我可以解释更多。谢谢你提前一吨。
编辑:谢谢大家的帮助很大,让我解释更多:
我有一个Spring REST API和两个Java
对象(JPA实体)命名的资源&行动,对象资源包含一个列表操作和操作包含对资源的引用。
当我打开一个网页,我感到我已经保存由$ http.get()方法返回数据库Resource
对象,名为choicesA
数组,数组的结构是这样的:
[
{"idResource":1, "nameResource": "resName1"},
{"idResource":2, "nameResource": "resName2"}
......etc depends oh how much rows I got from the DB
]
我有另一种方法,$ http.post(),它张贴Action
对象数组choicesB
一个单独的非嵌套数组。该阵列结构是这样的:
[
{"idAction":1, "nameAction":"nameAction1", "resource":
{"idResource":1, "nameResource": "resName1"},
{"idAction":2, "nameAction":"nameAction2", "resource":
{"idResource":2, "nameResource": "resName2"},
..
}
{...},
{...}
...
]
所以choicesA
数组包含Resource
对象,我用$ http.get(GOT),那么我想,以填补Action
对象choicesB
数组中,然后将数组保存使用$ http.post(),每个Action
应该包含一个Resource
对象。如果我点击在第一fieldset
标签例如增加更多的行动,意味着我要填写choicesB
阵列第一Action
对象,并分配给它位于choicesA
阵列等在第一Resource
对象..
我希望能够决定动作的数量并填充它们,然后将它们保存到choicesB
阵列中。但是每个动作都与我描述的特定对象有关。
我希望现在很清楚,对不起&再次感谢您。
也许我误解你的问题。也许这将有助于解决您的问题。
jsfiddle上的示例。
var app = angular.module('angularjs-starter', []);
app.controller('MainCtrl', function($scope) {
$scope.choicesA = [{
id: 'choice1',
choicesB:[]
}, {
id: 'choice2',
choicesB:[]
}];
$scope.addNewChoice = function() {
var newItemNo = $scope.choicesA.length + 1;
$scope.choicesA.push({
'id': 'choice' + newItemNo,
choicesB:[]
});
};
$scope.removeChoice = function(ind) {
$scope.choicesA.splice(ind,1);
};
$scope.addNewChoiceB = function(choice) {
var newItemNo = choice.choicesB.length + 1;
choice.choicesB.push({
'id': 'choice' + newItemNo
});
};
$scope.removeChoiceB = function(choice,ind) {
choice.choicesB.splice(ind,1);
};
});
fieldset {
background: #FCFCFC;
padding: 16px;
border: 1px solid #D5D5D5;
}
.addfields {
margin: 10px 0;
}
#choicesDisplay {
padding: 10px;
background: rgb(227, 250, 227);
border: 1px solid rgb(171, 239, 171);
color: rgb(9, 56, 9);
}
.remove {
background: #C76868;
color: #FFF;
font-weight: bold;
font-size: 21px;
border: 0;
cursor: pointer;
display: inline-block;
padding: 4px 9px;
vertical-align: top;
line-height: 100%;
}
input[type="text"],
select {
padding: 5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="angularjs-starter" ng-controller="MainCtrl">
<button class="addfields" ng-click="addNewChoice()">Add choice</button>
<fieldset data-ng-repeat="choice in choicesA">
<input type="text" ng-model="choice.name" name="" placeholder="Enter name">
<button class="remove" ng-click="removeChoice($index)">-</button>
<button class="addfields" ng-click="addNewChoiceB(choice)">Add fields</button>
<div data-ng-repeat="choiceb in choice.choicesB">
<input type="text" ng-model="choiceb.name" name="" placeholder="Enter field">
<button class="remove" ng-click="removeChoiceB(choice,$index)">-</button>
</div>
</fieldset>
<div id="choicesDisplay">
<pre>choicesA = {{ choicesA }}</pre>
<pre data-ng-repeat="choiceb in choicesA">choicesB = {{ choiceb.choicesB }}</pre>
</div>
</div>
上jsfiddle更新
活生生的例子。您的需求量的
非常感谢您的回复,我试着编辑您的代码以满足我的需求,但是我失败了。我编辑了我原来的帖子来描述我的情况,对不起。 – dwix
我相信你要做的是有2个嵌套数组。
然后你会嵌套ng-repeat
。您可以通过传递一个数组的功能
查看
<fieldset data-ng-repeat="group in choices">
<div ng-repeat="choice in group">
<input type="text" ng-model="choice.name" name="" placeholder="Enter name">
<button class="addfields" ng-click="addNewChoice(group)">Add fields</button>
<button class="remove" ng-click="removeChoice(group)">-</button>
</div>
</fieldset>
JS
$scope.choices = [
// first group
[{id: 'choice1'}, { id: 'choice2'}],
//second group
[{}]
];
$scope.addNewChoice = function(group) {
var newItemNo = group.length + 1;
group.push({
'id': 'choice' + newItemNo
});
};
$scope.removeChoice = function(group) {
group.pop();
};
注意,您将需要修改ID
系统有点参数跟踪哪些阵列。通常,这将来自服务器反正
@charlieftfl谢谢你,你的回答非常有帮助,如果不清楚,我很抱歉,我编辑了我原来的帖子来描述我的情况。 – dwix
<div ng-app="angularjs-starter" ng-controller="MainCtrl">
<fieldset>
<input data-ng-repeat="choice in choicesA" 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>
第一部分通过这一点,文本解决加入到sepecific字段集和我这个
我更新我的回答您更换第二htmlcode需求量的还不清楚。请检查。 –
@StepanKasyanenko我想用不同的方式,但你的例子也适用,谢谢! – dwix
不客气。 –