see we have 3 text boxes name,country and subitems
after clicking of subitems one popup should appear in that pop up again we have 3 text boxes OrderId,Freight,ShipCountry
Right now my requirement is i want dynamically add/remove rows in parent row in the same way
for chikd row also we have dynamically add/remove rows
subitems is a child row
I haven't wrote any code for pop up
I don't know where to start popup code for child row
after clicking of subitems popup textbox also i need to add/remove n no of rows
@{
Layout = null;
}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title></title>
</head>
<body>
<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.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.Add = function () {
//Add the new item to the Array.
var customer = {};
customer.Name = $scope.Name;
customer.Country = $scope.Country;
$scope.Customers.push(customer);
//Clear the TextBoxes.
$scope.Name = "";
$scope.Country = "";
};
$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);
}
}
});
</script>
<div ng-app="MyApp" ng-controller="MyController">
<table cellpadding="0" cellspacing="0">
<tr>
<th>Name</th>
<th>Country</th>
<th>subitems</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>
<table cellpadding="0" cellspacing="0">
<tr>
<th>Order Id</th>
<th>Freight</th>
<th>ShipCountry</th>
</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><input type="button" ng-click="Add()" value="Add" /></td>
</tr>
</tfoot>
</table>
</div>
</body>
</html>
