Hi Sander Elias,
I have cut the code and paste it on note pad
So please be look at that code and tell me how to do
Regards
On Thu, Nov 1, 2018 at 4:22 PM mahesh reddy <bapathimahesh...@gmail.com>
wrote:
> Hi Sander Elias,
>
> If you can look pictures you will get what i need
> My requirement if i click subitems click button it can display one popup
> in that pop up again i want add/delete rows dynamically.
> If enter some values on subitems that can be belong to that particular row
> only.
> Like this we can n no of rows.
> For each row has some subitems.
> If we need i can share some sample code
> Regards
> Mahesh Reddy
>
>
>
>
> On Thu, Nov 1, 2018 at 1:45 PM Sander Elias <sanderel...@gmail.com> wrote:
>
>> Hi Mahesh,
>>
>> Put a sample of your issue on plunkr or stackBlitz and I will extend it
>> for you!
>>
>> Regards
>> Sander
>>
>> --
>> 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 angular+unsubscr...@googlegroups.com.
>> To post to this group, send email to angular@googlegroups.com.
>> Visit this group at https://groups.google.com/group/angular.
>> For more options, visit https://groups.google.com/d/optout.
>>
>
--
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 angular+unsubscr...@googlegroups.com.
To post to this group, send email to angular@googlegroups.com.
Visit this group at https://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.
..........Html Code.......
<table>
<thead>
<tr>
<th>SNo</th>
<th>Category</th>
<th>Product</th>
<th>Item</th>
<th>Item Code</th>
<th>Price</th>
<th>Quantity</th>
<th>Sub Items</th>
<th>Total</th>
<th> </th>
</tr>
</thead>
<tbody>
<tr ng-model="myData1"
ng-repeat="invoice in displayedProducts track by $index">
@*<td><input type="text"
ng-model="invoice.Id" /></td>*@
<td>
{{invoice.id}}
</td>
@*<td>{{$index+1}}</td>*@
@*<td>{{invoice.Id}}</td>*@
<td>
@*<input type="text"
ng-model="invoice.CategortName" class="form-control" />*@
@*<select class="form-control"
name="CategortName" ng-model="invoice.CategortName" containerCssClass="all"
ng-options="c.CategoryID as c.CategortName for c in categories"
ng-disabled="disabled">
<option value="">Select
Category</option>
</select>*@
{{invoice.CategortName}}
</td>
<td>
@*<select select2=""
ng-model="invoice.ProductName" ng-disabled="!products"
class="form-control"
ng-options="s.ProductID as s.ProductName for s in products">
<option value="">-- Select Product
--</option>
</select>*@
{{invoice.ProductName}}
</td>
<td>
@*<input type="text"
ng-model="invoice.RAI_Item" class="form-control" />*@
{{invoice.RAI_Item}}
</td>
<td>
@*<input type="text"
ng-model="invoice.RAI_ItemCode" class="form-control" />*@
{{invoice.RAI_ItemCode}}
</td>
<td>
@*<input type="number"
ng-model="invoice.RAI_Price" class="form-control" />*@
{{invoice.RAI_Price}}
</td>
<td>
@*<input type="number"
ng-model="invoice.RAI_Quantity" class="form-control" />*@
{{invoice.RAI_Quantity}}
</td>
<td>
<table cellpadding="0"
cellspacing="0">
<tr>
<th>Id</th>
<th>text</th>
</tr>
<tbody ng-repeat="o in
invoice.subitems">
<tr>
<td>{{o.Id}}</td>
<td>{{o.text}}</td>
</tr>
</tbody>
</table>
</td>
@*{{invoice.subitems}}*@
<td>
@*<input type="text"
ng-model="invoice.RAI_Total" class="form-control" readonly />*@
{{invoice.RAI_Total}}
</td>
<td>
<button type="button"
class="btn btn-danger btn-sm" ng-click="remove($index)" readonly><span
class="glyphicon glyphicon-remove-sign"></span></button>
<button class="btn btn-info
btn-sm" ng-click="editrow($index)"><span class="glyphicon
glyphicon-pencil"></span></button>
</td>
</tr>
</tbody>
@*<tbody>
<tr ng-model="myData" ng-repeat="invoice in
myData">
<td>{{invoice.OderId}}</td>
<td>
{{invoice.RAI_Item}}
</td>
<td>{{invoice.RAI_ItemCode}}</td>
<td>{{invoice.RAI_Price}}</td>
<td>{{invoice.RAI_Quantity}}</td>
<td>{{invoice.RAI_Total}}</td>
<td><button type="button" class="btn
btn-danger" ng-click="remove($index)">Delete</button></td>
</tr>
</tbody>*@
<tfoot>
<tr ng-show="mahesh">
@*<td><input type="text"
ng-model="Id"/></td>*@
<td ng-model="Id">
{{$index+1}}
</td>
@*<td><input type="number"
ng-model="Id" class="form-control" /> </td>*@
<td>
<select class="input-sm
form-control" select2="" name="CategortName" ng-model="CategortName"
containerCssClass="all" ng-change="GetProducts()" ng-options="c.CategoryID as
c.CategortName for c in categories" ng-disabled="disabled">
<option value="">Select
Category</option>
</select>
</td>
<td>
<select select2=""
ng-model="ProductName" ng-disabled="!products"
class="input-sm
form-control" ng-options="s.ProductID as s.ProductName for s in products">
<option value="">-- Select
Product --</option>
</select>
</td>
<td>
<input type="text"
ng-model="RAI_Item" class="input-sm form-control" />
</td>
<td><input type="text"
ng-model="RAI_ItemCode" class="input-sm form-control" /></td>
<td><input type="number"
ng-model="RAI_Price" class="input-sm form-control" ng-keyup="AddNumbers()"
/></td>
<td><input type="number"
ng-model="RAI_Quantity" @*ng-click="add1(RAI_Price,RAI_Quantity)"*@
ng-keyup="AddNumbers()" class="input-sm form-control" /></td>
<td><button type="button"
ng-model="subitems" data-toggle="modal" data-target="{{'#' +
subitem+'Opts'}}">Click</button></td>
<td>{{RAI_Total}}</td>
@*<td>{{RAI_Quantity *RAI_Price}}
Rs</td>*@
@*<td><input type="number"
class="form-control" ng-click="add1(RAI_Price,RAI_Quantity)" /> </td>*@
<td>
<button type="button"
ng-show="mahesh" class="btn btn-success btn-sm" ng-click="add()"><span
class="glyphicon glyphicon-plus"></span></button>
</td>
</tr>
<tr ng-hide="mahesh" class="editpopup
editpopup-{{istrue}} ">
@*<td><input type="text"
ng-model="Id" /></td>*@
<td><input type="number"
ng-model="Id" class="form-control" /> </td>
@*<td ng-model="Id">{{ $index + 1
}}</td>*@
<td ng-model="CategortName">
<select class="form-control"
select2="" name="CategortName" ng-model="CategortName" containerCssClass="all"
ng-change="GetProducts()" ng-options="c.CategoryID as c.CategortName for c in
categories" ng-disabled="disabled">
<option value="">Select
Category</option>
</select>
</td>
<td>
<select select2=""
ng-model="ProductName" ng-disabled="!products"
class="form-control"
ng-options="s.ProductID as s.ProductName for s in products">
<option value="">-- Select
Product --</option>
</select>
</td>
<td>
<input type="text"
ng-model="RAI_Item" class="form-control" />
</td>
<td><input type="text"
ng-model="RAI_ItemCode" class="form-control" /></td>
<td><input type="number"
ng-model="RAI_Price" class="form-control" ng-keyup="AddNumbers()" /></td>
<td><input type="number"
ng-model="RAI_Quantity" @*ng-click="add1(RAI_Price,RAI_Quantity)"*@
ng-keyup="AddNumbers()" class="form-control" /></td>
<td>{{RAI_Total}}</td>
@*<td>{{RAI_Quantity *RAI_Price}}
Rs</td>*@
@*<td><input type="number"
class="form-control" ng-click="add1(RAI_Price,RAI_Quantity)" /> </td>*@
<td>
<button class="btn btn-sm
btn-success" ng-click="save($index)">save</button>
<button class="btn btn-sm
btn-warning" ng-click="close()">cancel</button>
</td>
</tr>
<tr>
<td></td>
<td></td>
<td>Total : </td>
<td>{{total()}} Rs</td>
</tr>
</tfoot>
</table>
</div>
</div>
</div>
<div class="modal fade" id="{{subitem+'Opts'}}" 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:20px; padding-right:20px;" class="active">
<th class="thick-line"
style="padding-left:20px; padding-right:20px; padding-top:6px;
padding-bottom:6px;">SNo</th>
<th
style="padding-left:20px; padding-right:20px;" class="thick-line">Text</th>
<th
style="padding-left:20px; padding-right:20px;" class="thick-line"> </th>
</tr>
</thead>
<tbody>
<tr
style="padding-left:20px; padding-right:20px;" ng-model="myData2"
ng-repeat="subitem in subitems">
<td>{{subitem.Id}}</td>
<td>{{subitem.text}}</td>
<td>
<button
type="button" class="btn btn-sm btn-danger" ng-click="remove1($index)"
readonly>Delete</button>
</td>
</tr>
</tbody>
<tfoot>
<tr
style="padding-left:20px; padding-right:20px;">
@*<td><input
type="text" ng-model="Id"/></td>*@
<td ng-model="Id">
{{$index+1}}
</td>
<td>
<input type="text"
class="input-sm form-control" ng-model="text" />
</td>
<td>
<button
type="button" ng-show="mahesh" class="btn btn-primary"
ng-click="add2()">Add</button>
</td>
</tr>
</tfoot>
</table>
</div>
</div>
</div>
</div>
@*<button class="btn btn-warning"
ng-click="close()">Close</button>
<button class="btn btn-success pull-right"
ng-click="save()">Save</button>*@
@*<p>This is a large modal.</p>*@
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default"
data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
...........Js........
$scope.myData = [
{
Id:"",
ProductID:"",
ProductName:"",
CategoryID:"",
CategortName: "",
RAI_Item:"",
RAI_ItemCode: "",
RAI_Price: "",
RAI_Quantity: "",
RAI_Total: "",
subitems:[{
Id:'',
text:'',
}
]
}];
$scope.displayedProducts = $scope.myData,$scope.subitems;
$scope.enabledEdit = [];
$scope.editEmployee = function (index) {
console.log("edit index" + index);
$scope.enabledEdit[index] = true;
}
$scope.deleteEmployee = function (index) {
$scope.myData1.splice(index, 1);
}
// Add functionality
$scope.add = function () {
alert("hello");
debugger;
//$scope.myData.push(item);
$scope.myData.push({
subitems:$scope.subitems,
//subitems: [{
// Id: $scope.Id,
// text: $scope.text,
//}],
//subitems:$scope.subitems,
id: $scope.myData.length + 1,
ProductID: $scope.ProductName,
ProductName: $scope.ProductName,
CategortName: $scope.CategortName,
RAI_Item: $scope.RAI_Item,
RAI_ItemCode: $scope.RAI_ItemCode,
CategoryID: $scope.CategortName,
RAI_Quantity: $scope.RAI_Quantity,
RAI_Price: $scope.RAI_Price,
RAI_Total: $scope.RAI_Total,
//Id:'',
//ProductID:'',
//ProductName:'',
//CategortName:'',
//RAI_Item:'',
//RAI_ItemCode:'',
//CategoryID:'',
//RAI_Quantity:'',
//RAI_Price:'',
//RAI_Total: '',
//subitems:[{
// Id:"",
// text:"",
//}],
});
//Add the new item to the Array.
//var customer = {
// //subitems: $scope.subitems,
// subitems:[{
// Id: $scope.Id,
// text:$scope.text,
// }],
// ProductID: $scope.ProductName,
// ProductName: $scope.ProductName,
// CategortName: $scope.CategortName,
// RAI_Item:$scope.RAI_Item,
// RAI_ItemCode:$scope.RAI_ItemCode,
// CategoryID: $scope.CategortName,
// RAI_Quantity: $scope.RAI_Quantity,
// RAI_Price: $scope.RAI_Price,
// RAI_Total: $scope.RAI_Total,
//};
//var customer = {};
//customer.Id = $scope.Id;
//customer.RAI_ItemCode = $scope.RAI_ItemCode;
//customer.RAI_Item = $scope.RAI_Item;
//customer.ProductID = $scope.ProductName;
//customer.ProductName = $scope.ProductName;
//customer.CategoryID = $scope.CategortName;
//customer.CategortName = $scope.CategortName;
//customer.RAI_Quantity = $scope.RAI_Quantity;
//customer.RAI_Price = $scope.RAI_Price;
//customer.subitems = $scope.subitems;
//$scope.subitems = [{
// Id: '',
// text:'',
//}]
////customer.subitems = $scope.subitems;
//customer.RAI_Total = $scope.RAI_Total;
//$scope.myData.push(customer);
GetCategory();
$scope.GetProducts();
//Clear the TextBoxes.
$scope.Id = "";
$scope.RAI_Item = "";
$scope.ProductName = "";
$scope.CategortName = "";
$scope.RAI_ItemCode = "";
$scope.RAI_Quantity = "";
$scope.Id = "";
$scope.text = "";
//$scope.subitems = "";
$scope.text="",
// $scope.Id = "";
// $scope.text = "";
//$scope.subitems =[{
// $scope.Id="";
//$scope.text="";
//}]
$scope.RAI_Price = "";
$scope.RAI_Total = "";
};
$scope.subitems = [];
//myData[0].subitems[0].newKey = "newVal";
$scope.add2 = function () {
alert("hello");
var items = {};
items.Id = $scope.subitems.length + 1;
items.text = $scope.text;
$scope.subitems.push(items);
$scope.Id = "";
$scope.text = "";
}
$scope.remove = function (index) {
var name = $scope.myData[index].RAI_Item;
if ($window.confirm("Do you want to delete: " + name)) {
$scope.myData.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);
}
},
