Dynamically Show Hide table Row based on condition using AngularJS in ASP.Net MVC

Last Reply 4 months ago By dharmendr

Posted 4 months ago

Hi,

I have 2 tables

MA_PTI

..................

PTI_Id    PTI_Name

1            Allowence

2           Deduction

MA_PDI

...............

PDI_Id PDI_ptiId PDI_Name

5          1           DA

6           1           SA

7           1            PA

8            1          HRA

9            2            PF

10           2             ESIC

my excepted o/p in form

....................................

Allowence

PayType          Is %

DA             checkbox  

SA              cb

PA                cb

HRA              cb

 

Deduction

PayType          Amount

PF                 Textbox

ESIC            TextBox

1st 4 records comes under Allowence need to display it on seperate grid view

in the same way last 2 records comes under Deduction

 

 

 

 

 

You are viewing reply posted by: dharmendr 4 months ago.
Posted 4 months ago

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