Skip to content

Instantly share code, notes, and snippets.

@apb2006

apb2006/nested.html

Last active December 10, 2015 21:39
Show Gist options
  • Save apb2006/4496913 to your computer and use it in GitHub Desktop.
Save apb2006/4496913 to your computer and use it in GitHub Desktop.
Download ZIP
angularjs nested repeats
Raw
nested.html
<!DOCTYPE html>
<html ng-app><head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title>Angular.js Nested Repeatable Objects</title>
<style>
#section-form { margin: auto; width: 960px; }
.section { border: 2px solid #999; margin: 10px 0; padding: 10px; }
.section > label { display: inline-block; padding-right: 10px; text-align: right; vertical-align:top; width: 150px; }
.question { background: #eee; border: 2px solid #aaa; margin: 5px 0; padding: 10px; }
#fader { position:fixed; top: 0px; left: 0px; width: 100%; height:100%; background-color: black; opacity: 0.8; z-index: 3; }
#dialogs > div { background: white; position: fixed; top:50%; left:50%; width: 420px; height: 210px; z-index: 3; margin-left: -210px; margin-top: -105px; border: 3px solid #7989D6; }
</style>
</head>
<body>
<div class="ng-directive" id="section-form" ng:controller="SectionForm">
<p>This demo showcases nested <strong>ng:repeat</strong> objects with modal
<strong>ng:switch</strong> dialogs for delete confirmation, as well as the ability
to populate the form from a string of data. based on
<a href="http://jacobmumm.com/2011/08/25/angular-js-nested-repeatable-example/">Jacob Mumm</a>'s work.
<a href=
"https://github.com/angular-app/Samples/blob/master/1820EN_08_Code/16%20-%20repeated%20forms%20%28YE1z2P%29/index.html">new</a>
</p>
<div ng:repeat="section in form.sections" class="section">
<label>Section Title: </label><input type="text" ng-model="section.sectionTitle" size="80"/><br/>
<label>Section Description: </label><textarea ng-model="section.sectionDesc" rows="3" cols="80"></textarea><br/>
<div class="question" ng:repeat="question in section.questions">
<textarea ng-model="question.value" rows="3" cols="80"></textarea>
<div>
<select ng-model="question.type">
<option value="">Select Rating Type</option>
<option value="2">1-10</option>
<option value="3">1-4</option>
<option value="4">1-5</option>
<option value="5">Yes/No</option>
<option value="6">True/False</option>
</select>
<button ng:click="deleteQuestion($parent.$index,$index)">Remove Question</button>
</div>
</div>
<button class="ng-directive" ng:click="section.questions.push({type:'',value:''})">Add Question</button>
<button class="ng-directive" ng:click="deleteSection($index)">Remove Section</button>
</div>
<button class="ng-directive" ng:click="form.sections.push({sectionTitle: '',sectionDesc: '', questions : [{type:'', value:''}]})">Add Section</button>
<br><br>
<button class="ng-directive" ng:bind-attr="{&quot;disabled&quot;:&quot;{{angular.equals(master,form)}}&quot;}"
ng:click="cancel()">Cancel</button>
<button class="ng-directive" ng:bind-attr="{&quot;disabled&quot;:&quot;{{angular.equals(master,form)}}&quot;}"
ng:click="save()">Save</button>
<hr>
<button class="ng-directive" ng:click="prepop()">Prepopulate</button>
form
<pre ng-bind="form | json"></pre>
master
<pre ng-bind="master | json"></pre>
<div ng:show="true" style="display: none">
<div id="fader" ng:show="dialog"></div>
<ng:switch on="dialog" id="dialogs">
<div ng:switch-when="deleteQuestion">
<h2>Are you sure you want to delete this question?</h2>
<button ng:click="confirmDeleteQuestion()">Delete Question</button>
<button ng:click="closeDialog()">Cancel</button>
</div>
<div ng:switch-when="deleteSection">
<h2>Are you sure you want to delete this section?</h2>
<button ng:click="confirmDeleteSection()">Delete Section</button>
<button ng:click="closeDialog()">Cancel</button>
</div>
</ng:switch>
</div>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.3/angular.min.js" ng:autobind></script>
<script>
function SectionForm($scope){
$scope.cancel=function(){
$scope.form = angular.copy($scope.master);
};
$scope.master = {
sections : [
{
sectionTitle: '',
sectionDesc: '',
questions : [
{type:'', value:''}
]
}
]
};
$scope.cancel();
$scope.prepop=function(){
$scope.form= {sections : [ {sectionTitle:"Section 1",sectionDesc:"Section One Description",questions:[ {type:"2",value:"Question 1"}, {type:"3",value:"Question 2"}, {type:"4",value:"Question 3"} ]} ] };
};
$scope.save=function(){
$scope.master = $scope.form;
$scope.cancel();
};
$scope.closeDialog=function(){
$scope.dialog = '';
};
$scope.confirmDeleteQuestion=function(){
$scope.act();
$scope.dialog = '';
};
$scope.deleteQuestion=function(pi,i){
$scope.dialog = 'deleteQuestion';
$scope.act = function(){$scope.form.sections[pi].questions.splice(i,1)};
};
$scope.confirmDeleteSection=function(){
$scope.act();
$scope.dialog = '';
};
$scope.deleteSection=function(index){
$scope.dialog = 'deleteSection';
$scope.act = function(){$scope.form.sections.splice(index,1)};
};
}
</script>
</body></html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment