添加按钮，动态也添加文本框，动态AngularJS

Question

我有这样的jsfiddle代码：

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阵列中。但是每个动作都与我描述的特定对象有关。

我希望现在很清楚，对不起&再次感谢您。

Answer 1

也许我误解你的问题。也许这将有助于解决您的问题。

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更新

活生生的例子。您的需求量的

Answer 2

我相信你要做的是有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系统有点参数跟踪哪些阵列。通常，这将来自服务器反正

DEMO

Answer 3

<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字段集和我这个