I have created Dynamic add/delete form element using angular.
my expectation admin can add question first and admin can add options for that particular question question.
here i have added my code "ADD QUESTION" is working properly but once question added we need to create options for that particular question "ADD OPTIONS" not working properly
i have added both "ADD QUESTION" and "ADD OPTIONS" but when you add 2 or 3 question and remove its not working properly
for example i have added one question and 4 options for that qustion .after that if i click "ADD QUESTION" button question form is coming with 4 options field, here it should come only one option form field .its repeating the first question options
help me out to move forward
var app = angular.module('angularjs-starter', []);
app.controller('MainCtrl', function($scope) {
$scope.data = {
name: '',
email: '',
questions: [
{
id: 'choice1'
}
],
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>
<label class="control-label col-sm-2">Add options</label>
<input type="text" ng-model="option.options" name="" placeholder="Add options">
<br>
<br>
<label class="control-label col-sm-2">options order</label>
<input type="text" ng-model="option.order" name="" placeholder="Add Question order">
<button class="remove" ng-show="$last" ng-click="removeOption()">-</button>
</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 admin added one question(my expecttion result):
{
"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"
}
]
}]
}
