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您更加清晰的选择吗? –