Dynamically add/delete rows in child row of parent row

Layout = null;

}

Name

Country

Subitems

Order Id	Freight	ShipCountry
{{o.OrderId}}	{{o.Freight}}	{{o.ShipCountry}}

OrderId	Freight	ShipCountry
{{subitem.OrderId}}	{{subitem.Freight}}	{{subitem.ShipCountry}}

hi , please be look at my code and try to override my problem

I need to add/delete rows dynamically in child row of parent row

For each parent row we have unique child row

In above code sample code subitems is a child row

Once we click subitems we want to display one pop up window and in that we need 3 fileds named as fright,OrderId,shipcountry

Helo brother could you please my query and helpfull to me

it's so need or else i can't move ahead

Kindly please help me

I tested every thing well working please check the the operation level

"stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js">
"text/javascript" src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.9/angular.min.js">
"text/javascript">
var app = angular.module('MyApp', [])
app.controller('MyController', function ($scope, $window) {
$scope.EditCustomer;
$scope.EditIndex;
$scope.EditorderIndex;
$scope.Customers = [
{
Name: "John Hammond", Country: "United States",
Orders: [
{ OrderId: 10248, Freight: 32.38, ShipCountry: 'France' },
{ OrderId: 10249, Freight: 12.43, ShipCountry: 'Japan' },
{ OrderId: 10250, Freight: 66.35, ShipCountry: 'Russia' }
]
},
];
$scope.Orders = [];
$scope.order;
$scope.Add = function () {
//Add the new item to the Array.
var customer = {};
customer.Name = $scope.Name;
customer.Country = $scope.Country;
customer.Orders = $scope.Orders;
$scope.Customers.push(customer);
$scope.Orders = [];
//Clear the TextBoxes.
$scope.Name = "";
$scope.Country = "";
};
$scope.add2 = function () {
var items = {};
items.OrderId = $scope.OrderId;
items.Freight = $scope.Freight;
items.ShipCountry = $scope.ShipCountry;
$scope.Orders.push(items);
$scope.OrderId = "";
$scope.Freight = "";
$scope.ShipCountry = "";
}
$scope.Remove = function (index) {
//Find the record using Index from Array.
var name = $scope.Customers[index].Name;
if ($window.confirm("Do you want to delete: " + name)) {
//Remove the item from Array using Index.
$scope.Customers.splice(index, 1);
}
}
$scope.remove1 = function (index) {
var name = $scope.Orders[index].OrderId;
if ($window.confirm("Do you want to delete: " + name)) {
$scope.Orders.splice(index, 1);
}
}
$scope.displayData = [];
$scope.add3 = function () {
var items = {};
items.OrderId = $scope.OrderId;
items.Freight = $scope.Freight;
items.ShipCountry = $scope.ShipCountry;
alert(items.Freight);
$scope.EditCustomer.Orders.push(items);
$scope.OrderId = "";
$scope.Freight = "";
$scope.ShipCountry = "";
}
$scope.edit = function (index) {
//Find the record using Index from Array.
$scope.EditCustomer = $scope.Customers[index];
$scope.Name = $scope.EditCustomer.Name;
$scope.Country = $scope.EditCustomer.Country;
//$scope.Orders = $scope.EditCustomer.Orders;
//$scope.EditCustomer = $scope.Customers[index];
$scope.EditIndex = index;
alert($scope.EditCustomer);
}
$scope.Update = function (index) {
alert("updated");
//Find the record using Index from Array.
$scope.EditCustomer.Name = $scope.Name;
$scope.EditCustomer.Country = $scope.Country;
$scope.Customers[index] = $scope.EditCustomer;
//$scope.Orders[index] = $scope.EditCustomer;
alert($scope.EditCustomer);
}
$scope.Edit2 = function (index) {
//Find the record using Index from Array.
$scope.EditCustomer = $scope.Customers[$scope.EditIndex];
var torder = $scope.EditCustomer.Orders[index];
$scope.OrderId = torder.OrderId;
$scope.Id = index;
$scope.Freight = torder.Freight
$scope.ShipCountry = torder.ShipCountry;
$scope.EditorderIndex = index;
}
$scope.Update2 = function () {
$scope.order = $scope.Customers[$scope.EditIndex].Orders[$scope.EditorderIndex];
$scope.order.OrderId = $scope.OrderId;
$scope.order.Freight = $scope.Freight;
$scope.order.ShipCountry = $scope.ShipCountry;
$scope.Customers[$scope.EditIndex].Orders[$scope.EditorderIndex] = $scope.order;
alert("updated");
}
$scope.remove2 = function (index) {
alert(index);
var orderid = $scope.EditCustomer.Orders[index].OrderId;
if ($window.confirm("Do you want to delete: " + orderid)) {
$scope.EditCustomer.Orders.splice(index, 1);
}
}
});
"MyApp" ng-controller="MyController">
"0" cellspacing="0">
Name
Country
Orders
"m in Customers">
{{m.Name}}"
{{m.Country}}
"button" ng-click="edit($index)" data-toggle="modal" data-target="#popup2" value="edit" />
@*"{{m.subitems}}">"button" data-ng-model="subitems" data-toggle="modal" data-target="#popup">Click*@
"{{m.subitems}}">
"button" class="btn btn-primary" ng-init="clicked=false" ng-click="clicked=!clicked">
View Orders
class="modal fade in" aria-hidden="false" style="display: block;" ng-show="clicked">
class="modal-dialog">
class="modal-content">
class="modal-header">
"button" class="close" ng-click="clicked=false">
×
class="modal-title">
Order Details

From the edit modal the child rows can delete and add for the parent .

edit the texbox values for parent row also and at last click on update button on the modal

Sorry yar Change to last one answer .Which is runing perfectly.Currently I am check it.

Brother change the Accepted Answer from first one to last one .Because Last one has all the featurs

Hi Mahesh I completed it and display it in bellow .Simple remove histry and open

It is like a good project .It may help to others .So accepted it

>
<html>
<head>
<title>title>
head>
<body>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js">script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.9/angular.min.js">script>
<script type="text/javascript">
var app = angular.module('MyApp', [])
app.controller('MyController', function ($scope, $window) {
$scope.EditCustomer;
$scope.Customers = [
{
Name: "John Hammond", Country: "United States",
Orders: [
{ OrderId: 10248, Freight: 32.38, ShipCountry: 'France' },
{ OrderId: 10249, Freight: 12.43, ShipCountry: 'Japan' },
{ OrderId: 10250, Freight: 66.35, ShipCountry: 'Russia' }
]
},
{
Name: "Mudassar Khan", Country: "India",
Orders: [
{ OrderId: 10248, Freight: 32.38, ShipCountry: 'France' },
{ OrderId: 10249, Freight: 12.43, ShipCountry: 'Japan' },
{ OrderId: 10250, Freight: 66.35, ShipCountry: 'Russia' }
]
},
{
Name: "Suzanne Mathews", Country: "France",
Orders: [
{ OrderId: 10248, Freight: 32.38, ShipCountry: 'France' },
{ OrderId: 10249, Freight: 12.43, ShipCountry: 'Japan' },
{ OrderId: 10250, Freight: 66.35, ShipCountry: 'Russia' }
]
},
{
Name: "Robert Schidner", Country: "Russia",
Orders: [
{ OrderId: 10248, Freight: 32.38, ShipCountry: 'France' },
{ OrderId: 10249, Freight: 12.43, ShipCountry: 'Japan' },
{ OrderId: 10250, Freight: 66.35, ShipCountry: 'Russia' }
]
}
];
$scope.Orders = [];
$scope.Add = function () {
//Add the new item to the Array.
var customer = {};
customer.Name = $scope.Name;
customer.Country = $scope.Country;
customer.Orders = $scope.Orders;
$scope.Customers.push(customer);
$scope.Orders = [];
//Clear the TextBoxes.
$scope.Name = "";
$scope.Country = "";
};
$scope.add2 = function () {
var items = {};
items.OrderId = $scope.OrderId;
items.Freight = $scope.Freight;
items.ShipCountry = $scope.ShipCountry;
$scope.Orders.push(items);
$scope.OrderId = "";
$scope.Freight = "";
$scope.ShipCountry = "";
}
$scope.add3 = function () {
var items = {};
items.OrderId = $scope.OrderId;
items.Freight = $scope.Freight;
items.ShipCountry = $scope.ShipCountry;
alert(items.Freight);
$scope.EditCustomer.Orders.push(items);
$scope.OrderId = "";
$scope.Freight = "";
$scope.ShipCountry = "";
}
$scope.Remove = function (index) {
//Find the record using Index from Array.
var name = $scope.Customers[index].Name;
if ($window.confirm("Do you want to delete: " + name)) {
//Remove the item from Array using Index.
$scope.Customers.splice(index, 1);
}
}
$scope.edit = function (index) {
//Find the record using Index from Array.
$scope.EditCustomer = $scope.Customers[index];
alert($scope.EditCustomer);
}
$scope.Update = function (index) {
alert("updated");
//Find the record using Index from Array.
$scope.EditCustomer.Name = $scope.Name;
$scope.EditCustomer.Country = $scope.Country;
$scope.Customers[index] = $scope.EditCustomer;
alert($scope.EditCustomer);
}
$scope.remove1 = function (index) {
var name = $scope.subitems[index].text;
if ($window.confirm("Do you want to delete: " + name)) {
$scope.subitems.splice(index, 1);
}
}
$scope.remove2 = function (index) {
alert(index);
var orderid = $scope.EditCustomer.Orders[index].OrderId;
if ($window.confirm("Do you want to delete: " + orderid)) {
$scope.EditCustomer.Orders.splice(index, 1);
}
}
});
script>
<div ng-app="MyApp" ng-controller="MyController">
<table cellpadding="0" cellspacing="0">
<tr>
<th>Nameth>
<th>Countryth>
<th>Subitemsth>
<th> th>
tr>
<tbody ng-repeat="m in Customers">
<tr>
<td><input type="text" value="{{m.Name}}" />td>
<td><input type="text" value="{{m.Country}}" />td>
<td><input type="button" ng-click="edit($index)" data-toggle="modal" data-target="#popup2" value="edit" />td>
<td value="{{m.subitems}}">
<table cellpadding="0" cellspacing="0">
<tr>
<th>Order Idth>
<th>Freightth>
<th>ShipCountryth>
tr>
<tbody ng-repeat="o in m.Orders">
<tr>
<td>{{o.OrderId}}td>
<td>{{o.Freight}}td>
<td> {{o.ShipCountry}} td>
tr>
tbody>
table>
td>
<td><input type="button" ng-click="Remove($index)" value="Remove" />td>
tr>
tbody>
<tfoot>
<tr>
<td><input type="text" ng-model="Name" />td>
<td><input type="text" ng-model="Country" />td>
<td><button type="button" ng-model="subitems" data-toggle="modal" data-target="#popup">Clickbutton>td>
<td><input type="button" ng-click="Add()" value="Add" />td>
tr>
tfoot>
table>
<div class="modal fade" id="popup" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×button>
<h4 class="modal-title">Modal Headerh4>
div>
<div class="modal-body">
<div class="s2vk-container">
<div class="row">
<div class="col-md-8">
<div class="panel panel-default">
<table class="table table-condensed">
<thead>
<tr style="padding-left:10px; padding-right:10px;" class="active">
<th class="thick-line" style="padding-left:10px; padding-right:20px; padding-top:6px; padding-bottom:6px;">OrderIdth>
<th style="padding-left:10px; padding-right:10px;" class="thick-line">Freightth>
<th style="padding-left:10px; padding-right:10px;" class="thick-line">ShipCountryth>
<th style="padding-left:10px; padding-right:10px;" class="thick-line"> th>
tr>
thead>
<tbody>
<tr style="padding-left:20px; padding-right:20px;" ng-model="myData2" ng-repeat="subitem in Orders">
<td>{{subitem.OrderId}}td>
<td>{{subitem.Freight}}td>
<td>{{subitem.ShipCountry}}td>
<td>
<button type="button" class="btn btn-sm btn-danger" ng-click="remove1($index)" readonlyreadonly=readonly>Deletebutton>
td>
tr>
tbody>
<tfoot>
<tr style="padding-left:20px; padding-right:20px;">
@*
<td><input type="text" ng-model="Id" />td>*@
<td>
<input type="text" class="input-sm form-control" ng-model="OrderId" />
td>
<td>
<input type="text" class="input-sm form-control" ng-model="Freight" />
td>
<td>
<input type="text" class="input-sm form-control" ng-model="ShipCountry" />
td>
<td>
<button type="button" class="btn btn-primary" ng-click="add2()">Addbutton>
td>
tr>
tfoot>
table>
div>
div>
div>
div>
div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Closebutton>
div>
div>
div>
div>
<div class="modal fade" id="popup2" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×button>
<h4 class="modal-title">Modal Headerh4>
div>
<div class="modal-body">
<div class="s2vk-container">
<div class="row">
<div class="col-md-8">
<div class="panel panel-default" ng-model="EditCustomer" >
<table class="table table-condensed">
<thead>
<tr style="padding-left:10px; padding-right:10px;" class="active">
<th class="thick-line" style="padding-left:10px; padding-right:20px; padding-top:6px; padding-bottom:6px;">OrderIdth>
<th style="padding-left:10px; padding-right:10px;" class="thick-line">Freightth>
<th style="padding-left:10px; padding-right:10px;" class="thick-line">ShipCountryth>
<th style="padding-left:10px; padding-right:10px;" class="thick-line"> th>
tr>
<tr>
<td><input type="text" value="{{EditCustomer.Name}}" ng-model="Name" />td>
<td><input type="text" value="{{EditCustomer.Country}}" ng-model="Country" />td>
<td> <button type="button" class="btn btn-primary" ng-click="Update()">Updatebutton>td>
tr>
thead>
<tbody>
<tr style="padding-left:20px; padding-right:20px;" ng-repeat="subitem in EditCustomer.Orders">
<td>{{subitem.OrderId}}td>
<td>{{subitem.Freight}}td>
<td>{{subitem.ShipCountry}}td>
<td>
<button type="button" class="btn btn-sm btn-danger" ng-click="remove2($index)" readonlyreadonly=readonly>Deletebutton>
td>
tr>
tbody>
<tfoot>
<tr style="padding-left:20px; padding-right:20px;">
@*
<td><input type="text" ng-model="Id" />td>*@
<td>
<input type="text" class="input-sm form-control" ng-model="OrderId" />
td>
<td>
<input type="text" class="input-sm form-control" ng-model="Freight" />
td>
<td>
<input type="text" class="input-sm form-control" ng-model="ShipCountry" />
td>
<td>
<button type="button" class="btn btn-primary" ng-click="add3()">Addbutton>
td>
tr>
tfoot>
table>
div>
div>
div>
div>
div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Closebutton>
div>
div>
div>
div>
div>
body>
html>

OK Just I am try to define a edit function in my sys

Hi mahes I did not define function for editing each row.Just display it.

Please try to solve like before functions.So that you can understand .

In bellow code I add another popup and each row a edit button .

When click edit the modal open with the data of the row.

Just you have to modify in dedit function that I have already define

>
<html>
<head>
<title>title>
head>
<body>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js">script>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.9/angular.min.js">script>
<script type="text/javascript">
var app = angular.module('MyApp', [])
app.controller('MyController', function ($scope, $window) {
$scope.EditCustomer;
$scope.Customers = [
{
Name: "John Hammond", Country: "United States",
Orders: [
{ OrderId: 10248, Freight: 32.38, ShipCountry: 'France' },
{ OrderId: 10249, Freight: 12.43, ShipCountry: 'Japan' },
{ OrderId: 10250, Freight: 66.35, ShipCountry: 'Russia' }
]
},
{
Name: "Mudassar Khan", Country: "India",
Orders: [
{ OrderId: 10248, Freight: 32.38, ShipCountry: 'France' },
{ OrderId: 10249, Freight: 12.43, ShipCountry: 'Japan' },
{ OrderId: 10250, Freight: 66.35, ShipCountry: 'Russia' }
]
},
{
Name: "Suzanne Mathews", Country: "France",
Orders: [
{ OrderId: 10248, Freight: 32.38, ShipCountry: 'France' },
{ OrderId: 10249, Freight: 12.43, ShipCountry: 'Japan' },
{ OrderId: 10250, Freight: 66.35, ShipCountry: 'Russia' }
]
},
{
Name: "Robert Schidner", Country: "Russia",
Orders: [
{ OrderId: 10248, Freight: 32.38, ShipCountry: 'France' },
{ OrderId: 10249, Freight: 12.43, ShipCountry: 'Japan' },
{ OrderId: 10250, Freight: 66.35, ShipCountry: 'Russia' }
]
}
];
$scope.Orders = [];
$scope.Add = function () {
//Add the new item to the Array.
var customer = {};
customer.Name = $scope.Name;
customer.Country = $scope.Country;
customer.Orders = $scope.Orders;
$scope.Customers.push(customer);
$scope.Orders = [];
//Clear the TextBoxes.
$scope.Name = "";
$scope.Country = "";
};
$scope.add2 = function () {
var items = {};
items.OrderId = $scope.OrderId;
items.Freight = $scope.Freight;
items.ShipCountry = $scope.ShipCountry;
$scope.Orders.push(items);
$scope.OrderId = "";
$scope.Freight = "";
$scope.ShipCountry = "";
}
$scope.Remove = function (index) {
//Find the record using Index from Array.
var name = $scope.Customers[index].Name;
if ($window.confirm("Do you want to delete: " + name)) {
//Remove the item from Array using Index.
$scope.Customers.splice(index, 1);
}
}
$scope.edit = function (index) {
//Find the record using Index from Array.
$scope.EditCustomer = $scope.Customers[index];
alert($scope.EditCustomer);
}
$scope.remove1 = function (index) {
var name = $scope.subitems[index].text;
if ($window.confirm("Do you want to delete: " + name)) {
$scope.subitems.splice(index, 1);
}
}
});
script>
<div ng-app="MyApp" ng-controller="MyController">
<table cellpadding="0" cellspacing="0">
<tr>
<th>Nameth>
<th>Countryth>
<th>Subitemsth>
<th> th>
tr>
<tbody ng-repeat="m in Customers">
<tr>
<td><input type="text" value="{{m.Name}}" />td>
<td><input type="text" value="{{m.Country}}" />td>
<td><input type="button" ng-click="edit($index)" data-toggle="modal" data-target="#popup2" value="edit" />td>
<td value="{{m.subitems}}">
<table cellpadding="0" cellspacing="0">
<tr>
<th>Order Idth>
<th>Freightth>
<th>ShipCountryth>
tr>
<tbody ng-repeat="o in m.Orders">
<tr>
<td>{{o.OrderId}}td>
<td>{{o.Freight}}td>
<td> {{o.ShipCountry}} td>
tr>
tbody>
table>
td>
<td><input type="button" ng-click="Remove($index)" value="Remove" />td>
tr>
tbody>
<tfoot>
<tr>
<td><input type="text" ng-model="Name" />td>
<td><input type="text" ng-model="Country" />td>
<td><button type="button" ng-model="subitems" data-toggle="modal" data-target="#popup">Clickbutton>td>
<td><input type="button" ng-click="Add()" value="Add" />td>
tr>
tfoot>
table>
<div class="modal fade" id="popup" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×button>
<h4 class="modal-title">Modal Headerh4>
div>
<div class="modal-body">
<div class="s2vk-container">
<div class="row">
<div class="col-md-8">
<div class="panel panel-default">
<table class="table table-condensed">
<thead>
<tr style="padding-left:10px; padding-right:10px;" class="active">
<th class="thick-line" style="padding-left:10px; padding-right:20px; padding-top:6px; padding-bottom:6px;">OrderIdth>
<th style="padding-left:10px; padding-right:10px;" class="thick-line">Freightth>
<th style="padding-left:10px; padding-right:10px;" class="thick-line">ShipCountryth>
<th style="padding-left:10px; padding-right:10px;" class="thick-line"> th>
tr>
thead>
<tbody>
<tr style="padding-left:20px; padding-right:20px;" ng-model="myData2" ng-repeat="subitem in Orders">
<td>{{subitem.OrderId}}td>
<td>{{subitem.Freight}}td>
<td>{{subitem.ShipCountry}}td>
<td>
<button type="button" class="btn btn-sm btn-danger" ng-click="remove1($index)" readonlyreadonly=readonly>Deletebutton>
td>
tr>
tbody>
<tfoot>
<tr style="padding-left:20px; padding-right:20px;">
@*
<td><input type="text" ng-model="Id" />td>*@
<td>
<input type="text" class="input-sm form-control" ng-model="OrderId" />
td>
<td>
<input type="text" class="input-sm form-control" ng-model="Freight" />
td>
<td>
<input type="text" class="input-sm form-control" ng-model="ShipCountry" />
td>
<td>
<button type="button" class="btn btn-primary" ng-click="add2()">Addbutton>
td>
tr>
tfoot>
table>
div>
div>
div>
div>
div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Closebutton>
div>
div>
div>
div>
<div class="modal fade" id="popup2" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×button>
<h4 class="modal-title">Modal Headerh4>
div>
<div class="modal-body">
<div class="s2vk-container">
<div class="row">
<div class="col-md-8">
<div class="panel panel-default" ng-model="EditCustomer" >
<table class="table table-condensed">
<thead>
<tr style="padding-left:10px; padding-right:10px;" class="active">
<th class="thick-line" style="padding-left:10px; padding-right:20px; padding-top:6px; padding-bottom:6px;">OrderIdth>
<th style="padding-left:10px; padding-right:10px;" class="thick-line">Freightth>
<th style="padding-left:10px; padding-right:10px;" class="thick-line">ShipCountryth>
<th style="padding-left:10px; padding-right:10px;" class="thick-line"> th>
tr>
<tr>
<td><input type="text" value="{{EditCustomer.Name}}" />td>
<td><input type="text" value="{{EditCustomer.Country}}" />td>
tr>
thead>
<tbody>
<tr style="padding-left:20px; padding-right:20px;" ng-repeat="subitem in EditCustomer.Orders">
<td>{{subitem.OrderId}}td>
<td>{{subitem.Freight}}td>
<td>{{subitem.ShipCountry}}td>
<td>
<button type="button" class="btn btn-sm btn-danger" ng-click="remove1($index)" readonlyreadonly=readonly>Deletebutton>
td>
tr>
tbody>
<tfoot>
<tr style="padding-left:20px; padding-right:20px;">
@*
<td><input type="text" ng-model="Id" />td>*@
<td>
<input type="text" class="input-sm form-control" ng-model="OrderId" />
td>
<td>
<input type="text" class="input-sm form-control" ng-model="Freight" />
td>
<td>
<input type="text" class="input-sm form-control" ng-model="ShipCountry" />
td>
<td>
<button type="button" class="btn btn-primary" ng-click="add2()">Addbutton>
td>
tr>
tfoot>
table>
div>
div>
div>
div>
div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Closebutton>
div>
div>
div>
div>
div>
body>
html>

OK Mahes .Actualy I have some pending work in my company . I am looking it.

So it will take some time .Please ....

Yes you have alread done it .You have already done for delete.

Like remove function define a function edit with idex parameter and

according to the index edit the array

Answer 4 is currect .But The id is incurrect I modify and send the code bellow

>
<html>
<head>
<title>title>
head>
<body>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js">script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.9/angular.min.js">script>
<script type="text/javascript">
var app = angular.module('MyApp', [])
app.controller('MyController', function ($scope, $window) {
$scope.Customers = [
{
Name: "John Hammond", Country: "United States",
Orders: [
{ OrderId: 10248, Freight: 32.38, ShipCountry: 'France' },
{ OrderId: 10249, Freight: 12.43, ShipCountry: 'Japan' },
{ OrderId: 10250, Freight: 66.35, ShipCountry: 'Russia' }
]
},
{
Name: "Mudassar Khan", Country: "India",
Orders: [
{ OrderId: 10248, Freight: 32.38, ShipCountry: 'France' },
{ OrderId: 10249, Freight: 12.43, ShipCountry: 'Japan' },
{ OrderId: 10250, Freight: 66.35, ShipCountry: 'Russia' }
]
},
{
Name: "Suzanne Mathews", Country: "France",
Orders: [
{ OrderId: 10248, Freight: 32.38, ShipCountry: 'France' },
{ OrderId: 10249, Freight: 12.43, ShipCountry: 'Japan' },
{ OrderId: 10250, Freight: 66.35, ShipCountry: 'Russia' }
]
},
{
Name: "Robert Schidner", Country: "Russia",
Orders: [
{ OrderId: 10248, Freight: 32.38, ShipCountry: 'France' },
{ OrderId: 10249, Freight: 12.43, ShipCountry: 'Japan' },
{ OrderId: 10250, Freight: 66.35, ShipCountry: 'Russia' }
]
}
];
$scope.Orders = [];
$scope.Add = function () {
//Add the new item to the Array.
var customer = {};
customer.Name = $scope.Name;
customer.Country = $scope.Country;
customer.Orders = $scope.Orders;
$scope.Customers.push(customer);
$scope.Orders = [];
//Clear the TextBoxes.
$scope.Name = "";
$scope.Country = "";
};
$scope.add2 = function () {
var items = {};
items.OrderId = $scope.OrderId;
items.Freight = $scope.Freight;
items.ShipCountry = $scope.ShipCountry;
$scope.Orders.push(items);
$scope.OrderId = "";
$scope.Freight = "";
$scope.ShipCountry = "";
}
$scope.Remove = function (index) {
//Find the record using Index from Array.
var name = $scope.Customers[index].Name;
if ($window.confirm("Do you want to delete: " + name)) {
//Remove the item from Array using Index.
$scope.Customers.splice(index, 1);
}
}
$scope.remove1 = function (index) {
var name = $scope.subitems[index].text;
if ($window.confirm("Do you want to delete: " + name)) {
$scope.subitems.splice(index, 1);
}
}
});
script>
<div ng-app="MyApp" ng-controller="MyController">
<table cellpadding="0" cellspacing="0">
<tr>
<th>Nameth>
<th>Countryth>
<th>Subitemsth>
<th> th>
tr>
<tbody ng-repeat="m in Customers">
<tr>
<td><input type="text" value="{{m.Name}}" />td>
<td><input type="text" value="{{m.Country}}" />td>
<td value="{{m.subitems}}">
<table cellpadding="0" cellspacing="0">
<tr>
<th>Order Idth>
<th>Freightth>
<th>ShipCountryth>
tr>
<tbody ng-repeat="o in m.Orders">
<tr>
<td>{{o.OrderId}}td>
<td>{{o.Freight}}td>
<td>{{o.ShipCountry}}td>
tr>
tbody>
table>
td>
<td><input type="button" ng-click="Remove($index)" value="Remove" />td>
tr>
tbody>
<tfoot>
<tr>
<td><input type="text" ng-model="Name" />td>
<td><input type="text" ng-model="Country" />td>
<td><button type="button" ng-model="subitems" data-toggle="modal" data-target="#popup">Clickbutton>td>
<td><input type="button" ng-click="Add()" value="Add" />td>
tr>
tfoot>
table>
<div class="modal fade" id="popup" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×button>
<h4 class="modal-title">Modal Headerh4>
div>
<div class="modal-body">
<div class="s2vk-container">
<div class="row">
<div class="col-md-8">
<div class="panel panel-default">
<table class="table table-condensed">
<thead>
<tr style="padding-left:10px; padding-right:10px;" class="active">
<th class="thick-line" style="padding-left:10px; padding-right:20px; padding-top:6px; padding-bottom:6px;">OrderIdth>
<th style="padding-left:10px; padding-right:10px;" class="thick-line">Freightth>
<th style="padding-left:10px; padding-right:10px;" class="thick-line">ShipCountryth>
<th style="padding-left:10px; padding-right:10px;" class="thick-line"> th>
tr>
thead>
<tbody>
<tr style="padding-left:20px; padding-right:20px;" ng-model="myData2" ng-repeat="subitem in Orders">
<td>{{subitem.OrderId}}td>
<td>{{subitem.Freight}}td>
<td>{{subitem.ShipCountry}}td>
<td>
<button type="button" class="btn btn-sm btn-danger" ng-click="remove1($index)" readonly>Deletebutton>
td>
tr>
tbody>
<tfoot>
<tr style="padding-left:20px; padding-right:20px;">
@*<td><input type="text" ng-model="Id"/>td>*@
<td>
<input type="text" class="input-sm form-control" ng-model="OrderId" />
td>
<td>
<input type="text" class="input-sm form-control" ng-model="Freight" />
td>
<td>
<input type="text" class="input-sm form-control" ng-model="ShipCountry" />
td>
<td>
<button type="button" class="btn btn-primary" ng-click="add2()">Addbutton>
td>
tr>
tfoot>
table>
div>
div>
div>
div>
div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Closebutton>
div>
div>
div>
div>
div>
body>
html>

OK I will try with your code.Please late me look in my system

$scope.Orders = [];

$scope.Add = function () {

//Add the new item to the Array.

var customer = {};

customer.Name = $scope.Name;

customer.Country = $scope.Country;

$scope.Customers.push(customer);

In the above you should add

customer.Orders = $scope.Orders

Because Orders is a mebmer of customer in the above

You may call add instated of add2

15 Replies

Know the answer? Post it — somebody with the same question will find it here.

Mahesh Reddy7y ago
Helo brother could you please my query and helpfull to me
it's so need or else i can't move ahead
Kindly please help me
Laxmidhar Sahoo7y ago
I tested every thing well working please check the the operation level
Laxmidhar Sahoo7y ago
6. "stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
7. "https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
8. "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js">
9. "text/javascript" src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.9/angular.min.js">
10. "text/javascript">
11. var app = angular.module('MyApp', [])
12. app.controller('MyController', function ($scope, $window) {
13. $scope.EditCustomer;
14. $scope.EditIndex;
15. $scope.EditorderIndex;
16. $scope.Customers = [
17. {
18. Name: "John Hammond", Country: "United States",
19. Orders: [
20. { OrderId: 10248, Freight: 32.38, ShipCountry: 'France' },
21. { OrderId: 10249, Freight: 12.43, ShipCountry: 'Japan' },
22. { OrderId: 10250, Freight: 66.35, ShipCountry: 'Russia' }
23. ]
24. },
25. ];
26. $scope.Orders = [];
27. $scope.order;
28. $scope.Add = function () {
29. //Add the new item to the Array.
30. var customer = {};
31. customer.Name = $scope.Name;
32. customer.Country = $scope.Country;
33. customer.Orders = $scope.Orders;
34. $scope.Customers.push(customer);
35. $scope.Orders = [];
36. //Clear the TextBoxes.
37. $scope.Name = "";
38. $scope.Country = "";
39. };
40. $scope.add2 = function () {
41. var items = {};
42. items.OrderId = $scope.OrderId;
43. items.Freight = $scope.Freight;
44. items.ShipCountry = $scope.ShipCountry;
45. $scope.Orders.push(items);
46. $scope.OrderId = "";
47. $scope.Freight = "";
48. $scope.ShipCountry = "";
49. }
50. $scope.Remove = function (index) {
51. //Find the record using Index from Array.
52. var name = $scope.Customers[index].Name;
53. if ($window.confirm("Do you want to delete: " + name)) {
54. //Remove the item from Array using Index.
55. $scope.Customers.splice(index, 1);
56. }
57. }
58. $scope.remove1 = function (index) {
59. var name = $scope.Orders[index].OrderId;
60. if ($window.confirm("Do you want to delete: " + name)) {
61. $scope.Orders.splice(index, 1);
62. }
63. }
64. $scope.displayData = [];
65. $scope.add3 = function () {
66. var items = {};
67. items.OrderId = $scope.OrderId;
68. items.Freight = $scope.Freight;
69. items.ShipCountry = $scope.ShipCountry;
70. alert(items.Freight);
71. $scope.EditCustomer.Orders.push(items);
72. $scope.OrderId = "";
73. $scope.Freight = "";
74. $scope.ShipCountry = "";
75. }
76. $scope.edit = function (index) {
77. //Find the record using Index from Array.
78. $scope.EditCustomer = $scope.Customers[index];
79. $scope.Name = $scope.EditCustomer.Name;
80. $scope.Country = $scope.EditCustomer.Country;
81. //$scope.Orders = $scope.EditCustomer.Orders;
82. //$scope.EditCustomer = $scope.Customers[index];
83. $scope.EditIndex = index;
84. alert($scope.EditCustomer);
85. }
86. $scope.Update = function (index) {
87. alert("updated");
88. //Find the record using Index from Array.
89. $scope.EditCustomer.Name = $scope.Name;
90. $scope.EditCustomer.Country = $scope.Country;
91. $scope.Customers[index] = $scope.EditCustomer;
92. //$scope.Orders[index] = $scope.EditCustomer;
93. alert($scope.EditCustomer);
94. }
95. $scope.Edit2 = function (index) {
97. //Find the record using Index from Array.
98. $scope.EditCustomer = $scope.Customers[$scope.EditIndex];
99. var torder = $scope.EditCustomer.Orders[index];
100. $scope.OrderId = torder.OrderId;
101. $scope.Id = index;
102. $scope.Freight = torder.Freight
103. $scope.ShipCountry = torder.ShipCountry;
104. $scope.EditorderIndex = index;
105. }
106. $scope.Update2 = function () {
109. $scope.order = $scope.Customers[$scope.EditIndex].Orders[$scope.EditorderIndex];
111. $scope.order.OrderId = $scope.OrderId;
112. $scope.order.Freight = $scope.Freight;
113. $scope.order.ShipCountry = $scope.ShipCountry;
114. $scope.Customers[$scope.EditIndex].Orders[$scope.EditorderIndex] = $scope.order;
115. alert("updated");
117. }
118. $scope.remove2 = function (index) {
119. alert(index);
120. var orderid = $scope.EditCustomer.Orders[index].OrderId;
121. if ($window.confirm("Do you want to delete: " + orderid)) {
122. $scope.EditCustomer.Orders.splice(index, 1);
123. }
124. }
125. });
127. "MyApp" ng-controller="MyController">
128. "0" cellspacing="0">
130. Name
131. Country
132. Orders
135. "m in Customers">
137. {{m.Name}}"
138. {{m.Country}}
139. "button" ng-click="edit($index)" data-toggle="modal" data-target="#popup2" value="edit" />
140. @*"{{m.subitems}}">"button" data-ng-model="subitems" data-toggle="modal" data-target="#popup">Click*@
141. "{{m.subitems}}">
142. "button" class="btn btn-primary" ng-init="clicked=false" ng-click="clicked=!clicked">
143. View Orders
145. class="modal fade in" aria-hidden="false" style="display: block;" ng-show="clicked">
146. class="modal-dialog">
147. class="modal-content">
148. class="modal-header">
149. "button" class="close" ng-click="clicked=false">
150. ×
152. class="modal-title">
153. Order Details
class="modal-body">
class="table table-condensed">
"padding-left: 10px; padding-right: 10px;" class="active">
class="thick-line" style="padding-left: 10px; padding-right: 20px; padding-top: 6px;
padding-bottom: 6px;">
OrderId
"padding-left: 10px; padding-right: 10px;" class="thick-line">
Freight
"padding-left: 10px; padding-right: 10px;" class="thick-line">
ShipCountry
"padding-left: 10px; padding-right: 10px;" class="thick-line">
"o in m.Orders">
{{o.OrderId}}
{{o.Freight}}
{{o.ShipCountry}}

Dynamically add/delete rows in child row of parent row

Modal Header