apb2006/nested.html

## 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>
	<!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="{"disabled":"{{angular.equals(master,form)}}"}"
	ng:click="cancel()">Cancel</button>
	<button class="ng-directive" ng:bind-attr="{"disabled":"{{angular.equals(master,form)}}"}"
	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>