Hi mahesh213,
Refer below sample 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_Name = "DA" });
types.Add(new PayType { PDI_Name = "SA" });
types.Add(new PayType { PDI_Name = "PA" });
types.Add(new PayType { PDI_Name = "HRA" });
types.Add(new PayType { PDI_Name = "PF" });
types.Add(new PayType { PDI_Name = "ESIC" });
foreach (PayType type in types)
{
if (type.PDI_Name.ToLower() == "da" || type.PDI_Name.ToLower() == "sa"
|| type.PDI_Name.ToLower() == "pa" || type.PDI_Name.ToLower() == "hra")
{
type.Type = "Allowence";
}
else if (type.PDI_Name.ToLower() == "pf" || type.PDI_Name.ToLower() == "esic")
{
type.Type = "Deduction";
}
}
return Json(types, JsonRequestBehavior.AllowGet);
}
public class PayType
{
public string EPI_IsPerc { get; set; }
public string PDI_Name { get; set; }
public string Type { 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();
function loadPaytypes() {
var EmployeeRecords = RegistrationService.gettaxes();
EmployeeRecords.then(function (d) {
$scope.paytypes = d.data;
}, function () {
alert("Error occured while fetching employee list...");
});
}
} ]);
app.service("RegistrationService", function ($http) {
this.gettaxes = function () {
return $http.get("/Home/getPayTypes");
};
});
</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.Type=='Allowence'">
<td><input type="hidden" />{{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.Type=='Deduction'">
<td><input type="hidden" />{{detail.PDI_Name}}</td>
<td><input type="text" class="form-control" /></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</body>
</html>
Screenshot
