Set CheckBox checked based on database value using AngularJS in ASP.Net MVC

Last Reply 3 months ago By mahesh213

Posted 3 months ago

Hi,

I have 2 tables on data

Taxes

Id  Name

1    CGST

2   STST

3    IGST 

Orders

OrderId       OrderName     CId

1                   aaa                1,3

2                    bbb                2,3

currently my requirement is that after clicking of edit button in gridview need to display relevant checkbox names in taxes popup

EX:If i have select OrderId=1 then display CGST and IGST names on taxes popup

Could you please help me 

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Index</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" />
    <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('MyApp', ['angularUtils.directives.dirPagination'])
        app.controller('MyController', function ($scope, $http, RegistrationService, $window) {
            loadEmployees();
            function loadEmployees() {
                var EmployeeRecords = RegistrationService.gettaxes();
                EmployeeRecords.then(function (d) {
                    $scope.taxes = d.data;
                },
                function () {
                    alert("Error occured while fetching employee list...");
                });
            }
            loadEmployees1();
            function loadEmployees1() {
                var EmployeeRecords1 = RegistrationService.getrecords();
                EmployeeRecords1.then(function (d) {
                    //success
                    $scope.orders = d.data;
                },
                function () {
                    alert("Error occured while fetching employee list...");
                });
            }
            $scope.edit = function (order) {
                var getData = RegistrationService.getOrders(order.OrderId);
                getData.then(function (s) {
                    $scope.details = s.data;
                    $scope.OrderId = details.OrderId;
                    $scope.CId = details.CId;                    
                },
              function (msg) {
                  alert(msg.data);
                  $scope.msg = msg.data;
              });
                $scope.apply();
            }

            $scope.GetChecked = function () {
                var checkedId = '';
                angular.forEach($scope.taxes, function (item, index) {
                    if (item.Selected) {
                        checkedId += item.Id + ",";
                    }
                });
                $scope.CId = checkedId.slice(0, checkedId.length - 1);
            }
        });
        app.service("RegistrationService", function ($http) {
            this.gettaxes = function () {
                return $http.get("/jobcode/getAll1");
            };
            this.getrecords = function () {
                return $http.get("/jobcode/getAll");
            };
            this.getOrders = function (Id) {
                debugger;
                var response = $http({
                    method: "post",
                    url: "/jobcode/getOrderByNo",
                    params: {
                        id: JSON.stringify(Id)
                    }
                });
                return response;
            }
        });

    </script>
</head>
<body ng-app="MyApp" ng-controller="MyController">
    <div class="well">
        <div class="form-horizontal">
            <div class="row">
                <div class="col-md-3">
                    <label for="Name">
                        Order Name
                    </label>
                    <input type="text"  class="form-control" ng-model="OrderName" />
                </div>
                <div class="col-md-3">
                    <label for="Job Type">
                        Description
                    </label>
                    <button type="button" class="btn btn-primary btn-sm" ng-init="clicked=false" ng-click="clicked=!clicked">
                        View Orders
                    </button>
                </div>
                <div class="col-md-3">
                    <label for="Name">
                        Checkbox Id
                    </label>
                    <input type="text" id="CId" class="form-control" ng-model="CId" />
                </div>
            </div>
            <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 style="margin-left: 15px; text-align: center;">
                                Subitem Details
                            </h4>
                        </div>
                        <div class="modal-body">
                            <form class="form-horizontal">
                                <fieldset>
                                    <!-- Form Name -->
                                    <label style="margin-left: 25px;" ng-repeat="o in taxes" class="checkbox">
                                        <input type="hidden" ng-model="o.Id" />
                                        <input type="checkbox" name="subject" ng-checked="{{o.Selected}}" ng-model="o.Selected" />{{o.Name}}
                                    </label>
                                </fieldset>
                            </form>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-primary" ng-click="clicked=false;GetChecked();">
                                Ok
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div id="dvContainer">
        <div>
            <div class="table-responsive ">
                <table id="dvData"  class="table table-bordered " >
                    <tr class="success">
                        <th >OrderName</th>
                        <th>CId</th>
                        <th><b>Actions</b></th>
                    </tr>
                    <tr dir-paginate="order in orders|orderBy:sortKey:reverse|filter:search|itemsPerPage:10">
                     
                        <td>
                            <input type="hidden" ng-model="order.OrderId " />
                            {{order.OrderName}}
                        </td>

                        <td>
                            {{order.CId}}
                        </td>
                        <td >
                            <a  ng-click="edit(order)" href="">Edit</a>
                        </td>
                           </tr>                   
                </table>               
            </div>
        </div>
    </div>
    <hr />
</body>
</html>

Taxes popup

checked      CGST

Unchecked   STST

checked        IGST

Posted 3 months ago Modified on 3 months ago

I have changed edit code like below

it's working fine for me 

            $scope.edit = function (order) {
                var getData = RegistrationService.getOrders(order.OrderId);
                getData.then(function (s) {
                    $scope.details = s.data;
                    $scope.OrderId = details.OrderId;
                    $scope.CId = details.CId;   
                    var Id = details.CId;
                    var strArr =Id.split(',');
                    for (var i = 0; i < $scope.taxes.length; i++) {
                        for (var j = 0; j < strArr.length; j++) {
                            if(strArr[j]==$scope.taxes[i].PDI_Id){
                            $scope.taxes[i].Selected = true;        
                        }
                    }
                }                                  
            },
            function (msg) {
                alert(msg.data);
                $scope.msg = msg.data;
            });
            $scope.apply();
            }