下面我添加动态表单添加和删除提交后我想获得所有的表单值。我可以这样做吗？任何人帮助我前进
这是我的jsfiddle链接
http://jsfiddle.net/rnnb32rm/1438/
下面我添加了我的鳕鱼
var app = angular.module('angularjs-starter', []);
app.controller('MainCtrl', function($scope) {
$scope.choices = [{id: 'choice1'}];
$scope.addNewChoice = function() {
var newItemNo = $scope.choices.length+1;
$scope.choices.push({'id':'choice'+newItemNo});
};
$scope.removeChoice = function() {
var lastItem = $scope.choices.length-1;
$scope.choices.splice(lastItem);
};
$scope.OnSave = function() {
console.log('sjs');
};
});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;
} <link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular.min.js"></script>
<div ng-app="angularjs-starter" ng-controller="MainCtrl">
<button class="addfields" ng-click="addNewChoice()">Add fields</button>
<br>
<label class="control-label col-sm-2">name</label>
<input type="text" ng-model="name" name="" placeholder="Add name">
<br>
<br>
<label class="control-label col-sm-2">email</label>
<input type="text" ng-model="email" name="" placeholder="Add emalil">
<br>
<br>
<fieldset data-ng-repeat="choice in choices">
<label class="control-label col-sm-2">Add Question</label>
<input type="text" ng-model="choice.name" name="" placeholder="Add Question">
<br>
<br>
<label class="control-label col-sm-2">Question order</label>
<input type="text" ng-model="choice.order" name="" placeholder="Add Question order">
<button class="remove" ng-show="$last" ng-click="removeChoice()">-</button>
</fieldset>
<br>
<br>
<button type="submit" class="btn btn-primary" ng-click="OnSave()">Submit</button>
<br>
<br>
<br>
<div id="choicesDisplay">
{{ choices }}
</div>
</div>
我的预期结果：
{
"name": "test",
"email": "asdf@gmail.com",
"questions": [
{
"question": "Which of the following is the most important characteristic for a supervisor?",
"questionorder": "1",
},
{
"question": "Which of the following is the most important characteristic for a supervisor?",
"questionorder": "2",
}
]
}
答案 0 :(得分：1)
//html
<div ng-app="angularjs-starter" ng-controller="MainCtrl">
<button class="addfields" ng-click="addNewChoice()">Add fields</button><br>
<label class="control-label col-sm-2">name</label>
<input type="text" ng-model="form.name" name="" placeholder="Add name"><br><br>
<label class="control-label col-sm-2">email</label>
<input type="text" ng-model="form.email" name="" placeholder="Add emalil"><br><br>
<fieldset data-ng-repeat="choice in choices">
<label class="control-label col-sm-2">Add Question</label>
<input type="text" ng-model="choice.name" name="" placeholder="Add Question"><br><br>
<label class="control-label col-sm-2">Question order</label>
<input type="text" ng-model="choice.order" name="" placeholder="Add Question order">
<button class="remove" ng-show="$last" ng-click="removeChoice()">-</button>
</fieldset><br><br>
<button type="submit" class="btn btn-primary" ng-click="OnSave(form, choices)">Submit</button><br><br><br>
<div id="choicesDisplay" ng-repeat="obj in formData">
{{ obj }}
</div>
</div>
//js
var app = angular.module('angularjs-starter', []);
app.controller('MainCtrl', function($scope) {
$scope.choices = [{id: 'choice1'}];
$scope.addNewChoice = function() {
var newItemNo = $scope.choices.length+1;
$scope.choices.push({'id':'choice'+newItemNo});
};
$scope.removeChoice = function() {
var lastItem = $scope.choices.length-1;
$scope.choices.splice(lastItem);
};
$scope.OnSave = function(form, choice) {
$scope.formData = [];
$scope.formData.push ({
name: form.name,
email: form.email,
questions: choice
});
console.log($scope.formData);
};
});
答案 1 :(得分：0)
函数OnSave需要更改为：
$scope.OnSave = function() {
var result = {
name: $scope.name,
email: $scope.email,
questions: $scope.choices.map(function(choice) {
return { question: choice.name, questionorder: choice.order };
})
};
console.log(result);
};
result将包含所需的结果。或者，您可以更改数据在模型中的保存方式。您可以按如下方式创建一个变量$scope.data：
$scope.data = {
name: '',
email: '',
questions: [
{
id: 'choice1'
}
]
};
然后将HTML绑定到此。这样，您就不需要在保存时再次准备结果数据。一个工作小提琴是here。
答案 2 :(得分：0)
var app = angular.module('angularjs-starter', []);
app.controller('MainCtrl', function($scope) {
$scope.obj = {
name: '',
email: '',
questions: []
};
var emptyObj = {
question: "",
questionorder: "",
options: []
};
var emptyOption = {
val: "",
key: ""
};
$scope.addNewChoice = function() {
$scope.obj.questions.push(angular.copy(emptyObj));
};
$scope.removeChoice = function(index) {
$scope.obj.questions.splice(index, 1);
};
$scope.addOptions = function(index) {
if($scope.obj.questions[index].options.length == 6){
alert('maximum 6 options are allowed');
return;
}
$scope.obj.questions[index].options.push(angular.copy(emptyOption));
};
$scope.removeOption = function(parentIdx, index) {
$scope.obj.questions[parentIdx].options.splice(index, 1);
};
$scope.OnSave = function() {
console.log('sjs');
};
});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;
} <link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular.min.js"></script>
<div ng-app="angularjs-starter" ng-controller="MainCtrl">
<button class="addfields" ng-click="addNewChoice()">Add fields</button><br>
<label class="control-label col-sm-2">name</label>
<input type="text" ng-model="obj.name" name="" placeholder="Add name">
<label class="control-label col-sm-2">email</label>
<input type="text" ng-model="obj.email" name="" placeholder="Add emalil"><br><br>
<fieldset data-ng-repeat="choice in obj.questions">
<label class="control-label col-sm-2">Add Question</label>
<input type="text" ng-model="choice.question" name="" placeholder="Add Question">
<button type="button" ng-click="addOptions($index)">
Add options
</button>
<br><br>
<label class="control-label col-sm-2">Question order</label>
<input type="text" ng-model="choice.questionorder" name="" placeholder="Add Question order">
<button class="remove" ng-show="$last" ng-click="removeChoice($index)">-</button>
<br>
<div ng-repeat="opt in choice.options track by $index">
<input type="text" name="val" placeholder="val" ng-model="opt.val">
<input type="text" name="key" placeholder="key" ng-model="opt.key">
<button class="remove" ng-click="removeOption($parent.$index, $index)">-</button>
</div>
</fieldset><br><br>
<button type="submit" class="btn btn-primary" ng-
click="OnSave()">Submit</button><br><br><br>
<div id="choicesDisplay">
{{obj | json}}
</div>
</div>