Hi,
In dynamically added rows i have 2 arrays Customers and Orders Where Customers - parenr row and Orders - child row
in parent row i have Quantity and in Orders(child row) i have OrderOd,Quantity1,ShipCountry
my requirement
1)I want to display alert message in Orders if we try to enter more rows(dynamically added rows) rather than Quantity (parentrow)
Ex:Ex:If Quantity=3 then if i try to add more rows in Orders compared to Quanity(parenrow) then i need to display alert message that means if try to add 4 rows in Orders i need to display alert message(if we enter less rows also no probelm) So,based upon Quanity we neee to enter rows in Orders It should not Excced more than Quanity
2)In orders I have Quantity1
Ex:If Quantity=4 (parent row)
OrderId Quantity1 Shipcountry
1 1 India
2 2 India
3 1 America
Note:the sum of Quantity1 should not exceed more than Quantity in parent row even though less also no probelm could you Kindly please help me
@{
Layout = null;
}
<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.Customers = [];
$scope.Orders = [];
$scope.Add = function () {
//Add the new item to the Array.
var customer = {};
customer.Quantity = $scope.Quantity
customer.Orders = $scope.Orders;
$scope.Customers.push(customer);
$scope.Orders = [];
//Clear the TextBoxes.
$scope.Quantity = "";
};
$scope.add2 = function () {
var items = {};
items.OrderId = $scope.OrderId;
items.Quantity1 = $scope.Quantity1;
items.ShipCountry = $scope.ShipCountry;
$scope.Orders.push(items);
$scope.OrderId = "";
$scope.ShipCountry = "";
$scope.Quantity1 = "";
}
});
</script>
<div ng-app="MyApp" ng-controller="MyController">
<table cellpadding="0" cellspacing="0">
<tr>
<th>Quantity</th>
<th>Orders</th>
<th> </th>
</tr>
<tbody ng-repeat="m in Customers">
<tr>
<td>{{m.Quantity}}</td>
<td value="{{m.subitems}}">
<table cellpadding="0" cellspacing="0">
<tr>
<th>Order Id</th>
<th>Quantity</th>
<th>ShipCountry</th>
</tr>
<tbody ng-repeat="o in m.Orders">
<tr>
<td>{{o.OrderId}}</td>
<td>{{o.Quantity1}}</td>
<td>{{o.ShipCountry}}</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
<tfoot>
<tr>
<td><input type="text" ng-model="Quantity" /></td>
<td><button type="button" ng-model="subitems" data-toggle="modal" data-target="#popup">Click</button></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 Header</h4>
</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;">OrderId</th>
<th style="padding-left:10px; padding-right:10px;" class="thick-line">Quantity</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>
<tr style="padding-left:20px; padding-right:20px;" ng-model="myData2" ng-repeat="subitem in Orders">
<td>{{subitem.OrderId}}</td>
<td>{{subitem.Quantity1}}</td>
<td>{{subitem.ShipCountry}}</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="number" class="input-sm form-control" ng-model="Quantity1" />
</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()">Add</button>
</td>
</tr>
</tfoot>
</table>
</div>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
