Hi,
Currently i am going to add dyanmic rows in Child array
In main array i have pagination each page 10 records
in first page add function is working proeprly in child array
issue is that in secodn page it's not working
but issue is that if i try to add new row (11th record) 2nd page add function is not working
Could you please help me
@{
Layout = null;
}
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.9/angular.min.js"></script>
<script src="~/masters/dirpagination.js"></script>
<script type="text/javascript">
var app = angular.module('MyApp', ['angularUtils.directives.dirPagination'])
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: "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: "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: "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: "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: "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: "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: "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: "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: "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: "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.Add = function () {
var customer = {};
customer.Name = $scope.Name;
customer.Country = $scope.Country;
customer.Orders = $scope.Orders;
$scope.Customers.push(customer);
$scope.Orders = [];
$scope.Name = "";
$scope.Country = "";
};
//Add new Punch Time row
$scope.add2 = function (index) {
debugger;
var newrowNo = $scope.Customers[index].Orders.length + 1;
$scope.Customers[index].Orders.push({ 'OrderId': '' + newrowNo });
};
$scope.Remove = function (index) {
var name = $scope.Customers[index].Name;
if ($window.confirm("Do you want to delete: " + name)) {
$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);
}
}
});
</script>
</head>
<body>
<div ng-app="MyApp" ng-controller="MyController">
<table cellpadding="0" cellspacing="0">
<tr>
<th>
Name
</th>
<th>
Country
</th>
<th>
Orders
</th>
<th>
</th>
</tr>
<tbody dir-paginate="m in Customers|orderBy:sortKey:reverse|filter:search|itemsPerPage:10">
<tr>
<td>
<input type="text" value="{{m.Name}}" />
</td>
<td>
<input type="text" value="{{m.Country}}" />
</td>
<td value="{{m.subitems}}">
<button type="button" class="btn btn-primary" ng-init="clicked=false" ng-click="clicked=!clicked">
View Orders
</button>
<div class="modal fade in" aria-hidden="false" style="display: block;" ng-show="clicked">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" ng-click="clicked=false">
×
</button>
<h4 class="modal-title">
Order Details
</h4>
</div>
<div class="modal-body">
<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;">
OrderId
</th>
<th style="padding-left: 10px; padding-right: 10px;" class="thick-line">
Freight
</th>
<th style="padding-left: 10px; padding-right: 10px;" class="thick-line">
ShipCountry
</th>
<th style="padding-left: 10px; padding-right: 10px;" class="thick-line">
</th>
</tr>
</thead>
<tbody ng-repeat="subitem in m.Orders">
<tr style="padding-left: 20px; padding-right: 20px;" ng-model="myData2">
<td>
<input type="text" class="input-sm form-control" ng-model="subitem.OrderId" />
</td>
<td>
<input type="text" class="input-sm form-control" ng-model="subitem.Freight" />
</td>
<td>
<input type="text" class="input-sm form-control" ng-model="subitem.ShipCountry" />
</td>
<td>
<button type="button" class="btn btn-sm btn-danger" ng-click="remove1($index)" readonly="readonly">
Delete
</button>
</td>
</tr>
</tbody>
<tfoot>
<tr style="padding-left: 20px; padding-right: 20px;">
<td>
<button type="button" class="btn btn-primary" ng-click="add2($index)">
Add
</button>
</td>
</tr>
</tfoot>
</table>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" ng-click="clicked=false">
Ok
</button>
</div>
</div>
</div>
</div>
</td>
<td>
<input type="button" ng-click="Remove($index)" value="Remove" class="btn btn-danger" />
</td>
</tr>
</tbody>
<dir-pagination-controls max-size="10"
direction-links="true"
boundary-links="true">
</dir-pagination-controls>
</table>
</div>
</body>
</html>
