Could please any body help me
edit functionality not working on child row
<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' }
]
},
];
$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.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];
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.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>Name</th>
<th>Country</th>
<th>Orders</th>
<th> </th>
</tr>
<tbody ng-repeat="m in Customers">
<tr>
<td>{{m.Name}}"</td>
<td>{{m.Country}}</td>
<td><input type="button" ng-click="edit($index)"
data-toggle="modal" data-target="#popup2" value="edit" /></td>
@*<td value="{{m.subitems}}"><button type="button"
data-ng-model="subitems" data-toggle="modal"
data-target="#popup">Click</button></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="o in
m.Orders">
<tr>
<td>
{{o.OrderId}}
</td>
<td>
{{o.Freight}}
</td>
<td>
{{o.ShipCountry}}
</td>
</tr>
</tbody>
</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" />
</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">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">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>
<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=readonly>Delete</button>
</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()">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 class="modal fade" id="popup2" role="dialog">
<div class="modal-dialog modal-lg">
<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"
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;">Name</th>
<th
style="padding-left:10px; padding-right:10px;"
class="thick-line">Country</th>
@*<th
style="padding-left:10px; padding-right:10px;" class="thick-line"></th>*@
<th
style="padding-left:10px; padding-right:10px;"
class="thick-line">Action</th>
<th
style="padding-left:10px; padding-right:10px;"
class="thick-line">Subitems</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()">Update</button></td>
<td><button
type="button" value="{{EditCustomer.subitems}}" ng-model="subitems"
data-toggle="modal" data-target="#popup3">Click</button></td>
</tr>
</thead>
</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 class="modal fade" id="popup3" role="dialog">
<div class="modal-dialog modal-lg">
<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"
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;">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>
<tr
style="padding-left:20px; padding-right:20px;" ng-repeat="subitem in
EditCustomer.Orders">
<td><input type="text"
value="{{subitem.OrderId}}" /></td>
<td><input type="text"
value="{{subitem.Freight}}" /></td>
<td><input type="text"
value="{{subitem.ShipCountry}}" /></td>
<td> <button
type="button" class="btn btn-primary btn-sm"
ng-click="Update()">Update</button>
<button
type="button" class="btn btn-sm btn-danger" ng-click="remove2($index)"
readonlyreadonly=readonly>Delete</button>
</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()">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>
--
You received this message because you are subscribed to the Google Groups
"Angular and AngularJS discussion" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
To post to this group, send email to [email protected].
Visit this group at https://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.
