Source Code

AngularJs Nested ng-repeat Filter Example

angularjs ng repeat nested array in Angularjs

The ng-repeat for angularjs directive instantiates basic a template one type once per item from a all collection like as an array, or list etc

    Data Filter:

  • {{item.date}} - {{item.time}}
    {{item.day}}

    • object: {{subData.object}}, Note: {{subData.dynemic_add_data}},
      Your Order: {{subData.name}}, pricedata: {{subData.pricedata}}
    • All List of Book:
  • {{hbookstemp.date}}, {{hbookstemp.time}}, {{hbookstemp.day}}

Example : index.html


<!DOCTYPE html>
<html ng-app='liveApp'>
<head>
    <title>Nested ng-repeat on AngularJS</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
</head>
<body>
<ul ng-controller="liveCtrl">
Data Filter:
<input type="text" value="Name" ng-model="sample_dataSearch" />
<hr/>
<hr/>
<div ng-show="editdata_div">
	<table>
		<tr>
			<td>
				<input type="text" style="width:93px;" ng-model="object" />
			</td>
			<td>
				<input type="text" style="width:93px;" ng-model="dynemic_add_data" />
			</td>
			<td>
				<input type="text" style="width:93px;" ng-model="name" />
			</td>
			<td>
				<input type="text" style="width:93px;" ng-model="pricedata" />
			</td>

			<td colspan="2">
				<input type="button" value="Save" ng-click="Save()" />
			</td>
		</tr>
	</table>
</div>
<br />
<li ng-repeat="item in data | filter:sample_dataSearch ">
	{{item.date}} - {{item.time}}<br />
	{{item.day}}
	<br /><br />
	<ul>
		<li ng-repeat="subData in item.subDataren ">
			object: {{subData.object}},
			Note: {{subData.dynemic_add_data}},<br /> Your Order: {{subData.name}}, pricedata: {{subData.pricedata}}
			<input type="button" value="Edit" ng-click="edit(subData)" />
		</li>
	</ul>
</li>
<input type="button" value="Get" ng-click="get(data)" />
All hbookstemp of Book:
<li ng-repeat="hbookstemp in my_product_full">{{hbookstemp.date}}, {{hbookstemp.time}}, {{hbookstemp.day}}</li>

</ul>

</body>
</html>

Example : App.js



var app = angular.module('liveApp', []);
 app.controller("liveCtrl", function ($scope, bookFactory) {
	 $scope.editdata_div = false;
	 $scope.get = function (data) {
		 $scope.my_product_full = data;
	 }

	 $scope.edit = function (subData) {

		 $scope.object = subData.object;
		 $scope.dynemic_add_data = subData.dynemic_add_data;
		 $scope.name = subData.name;
		 $scope.pricedata = subData.pricedata;
		 $scope.editdata_div = true;
	 }
	 $scope.Save = function () {
		 var subData = {
			 Date: $scope.object,
			 Time: $scope.dynemic_add_data,
			 Day: $scope.name
		 };
	  
		 subData.ID = $scope.ID;
		 $scope.editdata_div = false;
		 var saveMSG = bookFactory.update(subData);
		 saveMSG.then(function (messagefromController) {
			 $scope.editdata_div = false;
		 });
	 }

	 $scope.data = [{
		 date: '2015-02-28',
		 time: '15:30',
		 day: 'Saturday',
		 subDataren: [{
			 object: 'rooms',
			 dynemic_add_data: 'complete',
			 name: '1th Person',
			 pricedata: '4500$'
		 }]
	 },
			  {
				  date: '2015-03-07',
				  time: '08:30',
				  day: 'Saturday',
				 subDataren: [{
					  object: 'yards',
					  dynemic_add_data: 'nothing',
					  name: '2th Person',
					  pricedata: '3500$'
				  }]
			  },
			{
				date: '2015-03-17',
				time: '16:30',
				day: 'Tuesday',
				subDataren: [{
					object: 'pools',
					dynemic_add_data: 'nothing',
					name: '3th Person',
					pricedata: '2500$'
				}]
			}
	 ];
 }
 );

 //Factory
 app.factory("bookFactory", ['$http', function ($http) {

	 var urlBase = '/book/orderdetails';
	 var bookFactory = {};

	 //Data Save
	 bookFactory.update = function (subData) {
		 return $http.put(urlBase + '/' + subData.ID, subData)
	 }

	 return bookFactory;
 }]);