mahesh213 says:
if (r.Items[i].PTI_Name.toLowerCase() == "allowance") {
There is no need to check the if condition as already checking the condition in the html to show hide the rows.
Don't assign same scope value with multiple fields.
mahesh213 says:
$scope.EMI_Name = r.Orders.EMI_Name;
$scope.EMI_Name = r.Orders.EMI_Id;
Check this small example and modify as per your required fields.
For this example i have taken only required no of properties for displaying. You need to add more as per your requirement and assign values to it.
Also i have used hardcode value in controller. So change it with your database code.
Controller
public class HomeController : Controller
{
// GET: /Home/
public ActionResult Index()
{
return View();
}
public JsonResult getPayTypes()
{
List<PayType> types = new List<PayType>();
types.Add(new PayType { PDI_Id = 5, PDI_ptiId = 1, PTI_Name = "Allowence", PDI_Name = "DA" });
types.Add(new PayType { PDI_Id = 6, PDI_ptiId = 1, PTI_Name = "Allowence", PDI_Name = "SA" });
types.Add(new PayType { PDI_Id = 7, PDI_ptiId = 1, PTI_Name = "Allowence", PDI_Name = "PA" });
types.Add(new PayType { PDI_Id = 8, PDI_ptiId = 1, PTI_Name = "Allowence", PDI_Name = "HRA" });
types.Add(new PayType { PDI_Id = 9, PDI_ptiId = 2, PTI_Name = "Deduction", PDI_Name = "PF" });
types.Add(new PayType { PDI_Id = 10, PDI_ptiId = 2, PTI_Name = "Deduction", PDI_Name = "ESIC" });
return Json(types, JsonRequestBehavior.AllowGet);
}
public JsonResult getEmployeepays()
{
List<employeepay> types = new List<employeepay>();
types.Add(new employeepay { EPI_Id = 1, EPI_EmiId = 5, EMI_Name = "Emp 1", PTI_Name = "DA", PDI_Name = "" });
types.Add(new employeepay { EPI_Id = 2, EPI_EmiId = 6, EMI_Name = "Emp 2", PTI_Name = "SA", PDI_Name = "" });
types.Add(new employeepay { EPI_Id = 3, EPI_EmiId = 7, EMI_Name = "Emp 3", PTI_Name = "PA", PDI_Name = "" });
types.Add(new employeepay { EPI_Id = 4, EPI_EmiId = 8, EMI_Name = "Emp 4", PTI_Name = "HRA", PDI_Name = "" });
types.Add(new employeepay { EPI_Id = 5, EPI_EmiId = 9, EMI_Name = "Emp 5", PTI_Name = "PF", PDI_Name = "" });
types.Add(new employeepay { EPI_Id = 6, EPI_EmiId = 10, EMI_Name = "Emp 6", PTI_Name = "ESIC", PDI_Name = "" });
return Json(types, JsonRequestBehavior.AllowGet);
}
[HttpPost]
public JsonResult Edit(int? rID)
{
List<PDV_EPI> listItem = new List<PDV_EPI>();
listItem.Add(new PDV_EPI { EPI_Id = 25, EPI_EmiId = 10030, PTI_Name = "Allowence", PDI_Name = "DA", EPI_PtiId = 5, EPI_PdiId = 1 });
listItem.Add(new PDV_EPI { EPI_Id = 26, EPI_EmiId = 10030, PTI_Name = "Allowence", PDI_Name = "SA", EPI_PtiId = 6, EPI_PdiId = 1 });
listItem.Add(new PDV_EPI { EPI_Id = 27, EPI_EmiId = 10030, PTI_Name = "Allowence", PDI_Name = "PA", EPI_PtiId = 7, EPI_PdiId = 1 });
listItem.Add(new PDV_EPI { EPI_Id = 28, EPI_EmiId = 10030, PTI_Name = "Allowence", PDI_Name = "HRA", EPI_PtiId = 8, EPI_PdiId = 1 });
listItem.Add(new PDV_EPI { EPI_Id = 29, EPI_EmiId = 10030, PTI_Name = "Deduction", PDI_Name = "PF", EPI_PtiId = 9, EPI_PdiId = 2 });
listItem.Add(new PDV_EPI { EPI_Id = 30, EPI_EmiId = 10030, PTI_Name = "Deduction", PDI_Name = "ESIC", EPI_PtiId = 10, EPI_PdiId = 2 });
EmployeeSalaryDetails details = new EmployeeSalaryDetails();
details.Orders = new pdv_emi { EMI_Id = 10030, EMI_Name = "232" };
details.Items = listItem;
return Json(details, JsonRequestBehavior.AllowGet);
}
public class PayType
{
public int PDI_Id { get; set; }
public int PDI_ptiId { get; set; }
public string PDI_Name { get; set; }
public string PTI_Name { get; set; }
}
public class employeepay
{
public int EPI_Id { get; set; }
public int EPI_EmiId { get; set; }
public string EMI_Name { get; set; }
public string PTI_Name { get; set; }
public string PDI_Name { get; set; }
}
public class EmployeeSalaryDetails
{
public pdv_emi Orders { get; set; }
public List<PDV_EPI> Items { get; set; }
}
public class pdv_emi
{
public int EMI_Id { get; set; }
public string EMI_Name { get; set; }
}
public class PDV_EPI
{
public int EPI_Id { get; set; }
public int EPI_EmiId { get; set; }
public string PTI_Name { get; set; }
public string PDI_Name { get; set; }
public int EPI_PtiId { get; set; }
public int EPI_PdiId { get; set; }
}
}
View
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Index</title>
<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 type="text/javascript" src="https://cdn.jsdelivr.net/npm/angular-utils-pagination@0.11.1/dirPagination.js"></script>
<script type="text/javascript">
var app = angular.module('invoice', ['angularUtils.directives.dirPagination']);
app.controller('InvoiceController', ['$scope', '$http', '$window', '$filter', 'RegistrationService',
function ($scope, $http, $window, $filter, RegistrationService) {
loadPaytypes();
loadEmployeepays();
function loadPaytypes() {
var EmployeeRecords = RegistrationService.gettaxes();
EmployeeRecords.then(function (d) {
$scope.paytypes = d.data;
}, function () {
alert("Error occured while fetching employee list...");
});
}
function loadEmployeepays() {
var Employeepays = RegistrationService.getEmployeepays();
Employeepays.then(function (d) {
$scope.employeepays = d.data;
}, function () {
alert("Error occured while fetching employee list...");
});
}
$scope.Edit = function (EPI_EmiId) {
var id = EPI_EmiId;
$http({
method: 'POST',
url: '/Home/Edit/',
params: { rID: id }
}).success(function (r) {
$scope.EMI_Name = r.Orders.EMI_Name;
$scope.paytypes = [];
for (var i = 0; i < r.Items.length; i++) {
var customer = {};
var itemId = r.Items[i].EPI_EmiId;
customer.PDI_Id = r.Items[i].EPI_PdiId;
customer.PDI_ptiId = r.Items[i].EPI_PtiId;
customer.PDI_Name = r.Items[i].PDI_Name;
customer.PTI_Name = r.Items[i].PTI_Name;
$scope.paytypes.push(customer);
}
});
}
} ]);
app.service("RegistrationService", function ($http) {
this.gettaxes = function () {
return $http.get("/Home/getPayTypes");
};
this.getEmployeepays = function () {
return $http.get("/Home/getEmployeepays");
};
});
</script>
</head>
<body ng-app="invoice" ng-controller="InvoiceController">
<div class="container">
<div id="table" class="well">
<h3>Alowence</h3>
<div class="table-responsive " scroll-bookmark="bookmark2">
<table id="tblOrders" cellpadding="12" class="table table-bordered table-hover table-striped"
style="margin-left: 20px; margin-right: 20px;">
<tr class="success">
<th>PayType</th>
<th>Is %</th>
</tr>
<tbody ng-repeat="detail in paytypes">
<tr ng-if="detail.PTI_Name=='Allowence'">
<td>
<input type="hidden" ng-model="detail.PDI_Id" />
<input type="hidden" ng-model="detail.PDI_ptiId" />
<input type="text" ng-model="detail.PDI_Name" />
</td>
<td><input type="checkbox" /></td>
</tr>
</tbody>
</table>
</div>
</div>
<div id="table" class="well">
<h3>Deduction</h3>
<div class="table-responsive " scroll-bookmark="bookmark2">
<table id="tblOrders" cellpadding="12" class="table table-bordered table-hover table-striped"
style="margin-left: 20px; margin-right: 20px;">
<tr class="success">
<th>PayType</th>
<th>Is %</th>
</tr>
<tbody ng-repeat="detail in paytypes">
<tr ng-if="detail.PTI_Name=='Deduction'">
<td>
<input type="hidden" ng-model="detail.PDI_Id" />
<input type="hidden" ng-model="detail.PDI_ptiId" />
<input type="text" ng-model="detail.PDI_Name" />
</td>
<td><input type="text" class="form-control" /></td>
</tr>
</tbody>
</table>
</div>
</div>
<div id="dvContainer">
<div>
<div class="table-responsive " style="overflow-x: auto;">
<table id="dvData" cellpadding="12" class="table table-bordered table-hover table-striped"
style="margin-left: 20px; margin-right: 20px;">
<tr class="success">
<th style="cursor: pointer;" ng-click="sort('EMI_Name')">
<b>Employee Name</b> <span class="glyphicon sort-icon" ng-show="sortKey=='EMI_Name'"
ng-class="{'glyphicon-chevron-up':reverse,'glyphicon-chevron-down':!reverse}">
</span>
</th>
<th style="cursor: pointer;" ng-click="sort('PTI_Name')">
<b>Party Type</b> <span class="glyphicon sort-icon" ng-show="sortKey=='PTI_Name'"
ng-class="{'glyphicon-chevron-up':reverse,'glyphicon-chevron-down':!reverse}">
</span>
</th>
<th style="cursor: pointer;" ng-click="sort('PDI_Name')">
<b>Allow Deduction</b> <span class="glyphicon sort-icon" ng-show="sortKey=='PDI_Name'"
ng-class="{'glyphicon-chevron-up':reverse,'glyphicon-chevron-down':!reverse}">
</span>
</th>
<th><b>Actions</b></th>
</tr>
<tr dir-paginate="employeepay in employeepays|orderBy:sortKey:reverse|filter:search|itemsPerPage:10"
ng-model="search">
<td>
<input type="hidden" ng-model="employeepay.EPI_Id" />
<input type="hidden" ng-model="employeepay.EPI_EmiId" />
{{employeepay.EMI_Name}}
</td>
<td>{{employeepay.PTI_Name }}</td>
<td>{{employeepay.PDI_Name }}</td>
<td><a scroll-to-bookmark="bookmark" ng-click="Edit(employeepay.EPI_EmiId)" href="">Edit</a></td>
</tr>
</table>
</div>
</div>
</div>
</div>
</body>
</html>
Screenshot
