1
我已經使用角度創建了動態添加/刪除表單元素。如何在動態表單域中添加動態表單域？
我的期望管理員可以先添加問題，管理員可以添加該特定問題的選項。
在這裏，我已經加了我的代碼「添加問題」工作正常，但一旦問題加入我們需要創建一個針對特定問題選擇「添加選項」工作不正常
我添加了兩個「添加問題」和「添加選項」，但當你添加2或3個問題，並刪除其不能正常工作
例如，我已經添加了一個問題和4選項爲該qustion。此後，如果我點擊「添加問題」按鈕問題表單即將到來有4個選項字段，在這裏它應該只有一個選項表單字段。重複第一個問題選項
幫助我前進
var app = angular.module('angularjs-starter', []);
app.controller('MainCtrl', function($scope) {
$scope.data = {
\t name: '',
email: '',
questions: [
{
id: 'choice1'
}
],
\t questionoption: [
{
id: 'option1'
}
]
};
$scope.addNewChoice = function() {
var newItemNo = $scope.data.questions.length + 1;
$scope.data.questions.push({
'id': 'choice' + newItemNo
});
};
$scope.removeChoice = function() {
var lastItem = $scope.data.questions.length - 1;
$scope.data.questions.splice(lastItem);
};
$scope.OnSave = function() {
console.log($scope.data);
};
$scope.addNewoptions = function() {
var newItemNo = $scope.data.questionoption.length + 1;
$scope.data.questionoption.push({
'id': 'option' + newItemNo
});
};
$scope.removeOption = function() {
var lastItem = $scope.data.questionoption.length - 1;
$scope.data.questionoption.splice(lastItem);
};
});fieldset {
background: #FCFCFC;
padding: 16px;
border: 1px solid #D5D5D5;
}
.fields {
background: #FCFCFC;
padding: 18px;
border: 1px solid red;
}
.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.1/angular.min.js"></script>
<div ng-app="angularjs-starter" ng-controller="MainCtrl">
<button class="addfields" ng-click="addNewChoice()">Add question</button>
<br>
<label class="control-label col-sm-2">name</label>
<input type="text" ng-model="data.name" name="" placeholder="Add name">
<br>
<br>
<label class="control-label col-sm-2">email</label>
<input type="text" ng-model="data.email" name="" placeholder="Add emalil">
<br>
<br>
<fieldset data-ng-repeat="choice in data.questions">
<button class="addfields" ng-click="addNewoptions()">Add options</button><br>
<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><br><br>
<div class="fields" data-ng-repeat="option in data.questionoption">
<br>
\t \t \t <label class="control-label col-sm-2">Add options</label>
\t \t \t <input type="text" ng-model="option.options" name="" placeholder="Add options">
\t \t \t <br>
\t \t \t <br>
\t \t \t <label class="control-label col-sm-2">options order</label>
\t \t \t <input type="text" ng-model="option.order" name="" placeholder="Add Question order">
\t \t \t <button class="remove" ng-show="$last" ng-click="removeOption()">-</button>
\t \t </div>
</fieldset>
<br>
<br>
<button type="submit" class="btn btn-primary" ng-click="OnSave()">Submit</button>
<br>
<br>
<br>
<div id="choicesDisplay">
{{ data.questions }}
</div>
</div>IF管理員添加一個問題（我expecttion結果）：
{
"name": "test",
"email": "[email protected]",
"questions": [{
"question": "Which of the following is the most important characteristic for a supervisor?",
"questionorder": "1",
"options": [{
"val": "Approachable",
"key": "options1"
},
{
"val": "Qualified",
"key": "options3"
},
{
"val": "Honest",
"key": "options2"
}
]
}]
}
它添加too.Can您更加清晰的選擇嗎？ –