aaronksaunders · September 3, 2015 03:43 · vicenrele · Dec 15, 2016
diff --git a/Nested ng-repeat in AngularJS with Checkboxes.markdown b/Nested ng-repeat in AngularJS with Checkboxes.markdown
diff --git a/index.html b/index.html
 <html>

 <head>
  <script src="https://code.jquery.com/jquery.min.js"></script>
  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular.min.js"></script>
  <meta charset="utf-8">
  <title>JS Bin</title>
 </head>

 <body ng-app="myApp" ng-controller="myCtrl">
  <div class="container">
    <div class="page-header">
      <h2>Nested ng-repeat in AngularJS with Checkboxes</h2>
      <p>
        Example of how to render data in nested ng-repeat(s) and get the selected items from the nested list in real-time through a change event or looping through the data in the end.
      </p>
    </div>
    <div style="font-size:larger">
      <div ng-repeat="week in myData">
        <div ng-repeat="day in week.days">
          {{day.templateDay}}
          <b>Jobs:</b>
          <br/>
          <ul>
            <li ng-repeat="job in day.jobs">
              <!-- add ng-change to get realtime updates -->
              <input type="checkbox" ng-model="job.checked" ng-change="getSelectedItems()"> {{job.name}}
            </li>
          </ul>
        </div>
        <div>
          <!-- add button to get changes at the end -->
          <p>&nbsp</p>
          <button class="btn btn-primary" ng-click="getSelectedItems($event)">
            Get Selected Items
          </button>
          <p>&nbsp</p>
          <p>
            Click below to have application update selected items in realtime
            <p>
              <input type="checkbox" ng-model="update.realtime"> Toggle Update on Change Event
              <p>&nbsp</p>
        </div>
      </div>
    </div>
    <div>
      <h4>Selected Items</h4>
      <pre class="small">{{selectedData |json}}</pre>
      <h4>Source Data</h4>
      <pre class="small">{{myData |json}}</pre>
    </div>
  </div>
 </body>

 </html>
diff --git a/script.js b/script.js
 var app = angular.module('myApp', []);
 app.controller('myCtrl', function($scope) {

  $scope.update = {realtime : false};
  $scope.myData = [{
    "number": "2013-W45",
    "days": [{
      "templateDay": "Monday",
      "jobs": [{
        "name": "Wakeup",
      }, {
        "name": "work 9-5",

      }]
    }, {
      "templateDay": "Tuesday",
      "jobs": [{
        "name": "sleep in"
      }, {
        "name": "drop reina"
      }, {
        "name": "teach at howard"
      }]
    }]
  }];

  $scope.getSelectedItems = function(_event) {
    var data = $scope.myData;
    var results = [];
    var day = null;
    
    if (!_event && !$scope.update.realtime) {
      return
    }
    
    angular.forEach(data,function(_week){
      angular.forEach(_week.days,function(_day){
        day = _day;
        angular.forEach(_day.jobs,function(_job){
          if (_job.checked === true) {
            _job.day = day.templateDay;
            results.push(angular.copy(_job));
          }
        });
      });
    });

    $scope.selectedData = results;
  }
 });
	<html>

	<head>
	<script src="https://code.jquery.com/jquery.min.js"></script>
	<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
	<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular.min.js"></script>
	<meta charset="utf-8">
	<title>JS Bin</title>
	</head>

	<body ng-app="myApp" ng-controller="myCtrl">
	<div class="container">
	<div class="page-header">
	<h2>Nested ng-repeat in AngularJS with Checkboxes</h2>
	<p>
	Example of how to render data in nested ng-repeat(s) and get the selected items from the nested list in real-time through a change event or looping through the data in the end.
	</p>
	</div>
	<div style="font-size:larger">
	<div ng-repeat="week in myData">
	<div ng-repeat="day in week.days">
	{{day.templateDay}}
	<b>Jobs:</b>
	<br/>
	<ul>
	<li ng-repeat="job in day.jobs">
	<!-- add ng-change to get realtime updates -->
	<input type="checkbox" ng-model="job.checked" ng-change="getSelectedItems()"> {{job.name}}
	</li>
	</ul>
	</div>
	<div>
	<!-- add button to get changes at the end -->
	<p>&nbsp</p>
	<button class="btn btn-primary" ng-click="getSelectedItems($event)">
	Get Selected Items
	</button>
	<p>&nbsp</p>
	<p>
	Click below to have application update selected items in realtime
	<p>
	<input type="checkbox" ng-model="update.realtime"> Toggle Update on Change Event
	<p>&nbsp</p>
	</div>
	</div>
	</div>
	<div>
	<h4>Selected Items</h4>
	<pre class="small">{{selectedData \|json}}</pre>
	<h4>Source Data</h4>
	<pre class="small">{{myData \|json}}</pre>
	</div>
	</div>
	</body>

	</html>
	var app = angular.module('myApp', []);
	app.controller('myCtrl', function($scope) {

	$scope.update = {realtime : false};
	$scope.myData = [{
	"number": "2013-W45",
	"days": [{
	"templateDay": "Monday",
	"jobs": [{
	"name": "Wakeup",
	}, {
	"name": "work 9-5",

	}]
	}, {
	"templateDay": "Tuesday",
	"jobs": [{
	"name": "sleep in"
	}, {
	"name": "drop reina"
	}, {
	"name": "teach at howard"
	}]
	}]
	}];

	$scope.getSelectedItems = function(_event) {
	var data = $scope.myData;
	var results = [];
	var day = null;

	if (!_event && !$scope.update.realtime) {
	return
	}

	angular.forEach(data,function(_week){
	angular.forEach(_week.days,function(_day){
	day = _day;
	angular.forEach(_day.jobs,function(_job){
	if (_job.checked === true) {
	_job.day = day.templateDay;
	results.push(angular.copy(_job));
	}
	});
	});
	});

	$scope.selectedData = results;
	}
	});