Check uncheck all CheckBox in Table Row based on condition in AngularJS

mahesh21...

SOLVED CLOSED ACTIVE ANSWERED
User: mahesh213
Posted: on Oct 07, 2019 12:30 AM
Forum: AngularJS
Answer: 1
Views: 12831
Sample Code: Download

Hi,

currently in that i am going to do check/uncheck relevant fields(Selected,Add,Edit)

My requirement in this form is

1) If i have select all need to check all respective fiels (Selected,Edit, and Add)

2) If i have checked particular Customer Id Row then check Edit and Add fields on that particular row

3) If i have uncheck any of field(Add,Edit) then uncheck Customer Id check box (Selected)

@{ 
    Layout = null;
}
<html>
<head>
    <title></title>
</head>
<body>
    <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.9/angular.min.js"></script>
    <script type="text/javascript">
        var app = angular.module('MyApp', [])
        app.controller('MyController', function ($scope) {
            $scope.Customers = [
                { CustomerId: 1, Name: "John Hammond", Country: "United States", Selected: false,Add:false ,Edit:false},
                { CustomerId: 2, Name: "Mudassar Khan", Country: "India", Selected: false, Add: false,Edit:false },
                { CustomerId: 3, Name: "Suzanne Mathews", Country: "France", Selected: false, Add: true, Edit: false },
                { CustomerId: 4, Name: "Robert Schidner", Country: "Russia", Selected: false, Add: true, Edit: false }
               ];

            $scope.CheckUncheckHeader = function () {
                $scope.IsAllChecked = false;
                for (var i = 0; i < $scope.Customers.length; i++) {
                    if (!$scope.Customers[i].Selected) {
                        $scope.IsAllChecked = false;
                        break;
                    }
                };
            };
            $scope.CheckUncheckHeader();

            $scope.CheckUncheckAll = function () {
                for (var i = 0; i < $scope.Customers.length; i++) {
                    $scope.Customers[i].Selected = $scope.IsAllChecked;
                }
            };
        });
    </script>
    <div ng-app="MyApp" ng-controller="MyController">
        <table cellpadding="0" cellspacing="0">
            <tr>
                <th align="left">
                    <label>
                        <input type="checkbox" ng-model="IsAllChecked" ng-change="CheckUncheckAll()" />
                        CustomerId
                    </label>
                </th>
                <th>Name</th>
                <th>Country</th>
                <th>Add</th>
                <th>Edit</th>
            </tr>
            <tbody ng-repeat="m in Customers">
                <tr>
                    <td>
                        <label for="chkCustomer_{{m.CustomerId}}">
                            <input id="chkCustomer_{{m.CustomerId}}" type="checkbox" ng-model="m.Selected" ng-change="CheckUncheckHeader()" />
                            {{m.CustomerId}}
                        </label>
                    </td>
                    <td>{{m.Name}}</td>
                    <td>{{m.Country}}</td>
                    <td><input type="checkbox" ng-model="m.Add" /></td>
                    <td><input type="checkbox" ng-model="m.Edit" /></td>
                </tr>
            </tbody>
        </table>
    </div>
</body>
</html>

Could you please help me

Download FREE API for Word, Excel and PDF in ASP.Net

dharmend...

0 2

Reply
ANSWER
User: dharmendr
Replied: on Oct 07, 2019 05:59 AM
Modified: on Oct 07, 2019 06:00 AM
Report

Hi mahesh213,

Check this example. Now please take its reference and correct your code.

HTML

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <style type="text/css">
        table
        {
            border: 1px solid #ccc;
        }
    </style>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.5/angular.js"></script>
    <script type="text/javascript">
        var app = angular.module('MyApp', [])
        app.controller('MyController', function ($scope, $filter) {
            $scope.Customers = [{ CustomerId: 1, Selected: false, Add: false, Edit: false, Name: "John Hammond", Country: "United States" },
                                { CustomerId: 2, Selected: false, Add: false, Edit: false, Name: "Mudassar Khan", Country: "India" },
                                { CustomerId: 3, Selected: false, Add: false, Edit: false, Name: "Suzanne Mathews", Country: "France" },
                                { CustomerId: 4, Selected: false, Add: false, Edit: false, Name: "Robert Schidner", Country: "Russia"}];

            $scope.CheckUncheckHeader = function () {
                $scope.IsAllChecked = true;
                for (var i = 0; i < $scope.Customers.length; i++) {
                    if (!$scope.Customers[i].Selected) {
                        $scope.IsAllChecked = false;
                        break;
                    }
                };
            };

            $scope.CheckUncheckHeader();

            $scope.CheckUncheckRow = function (id) {
                for (var i = 0; i < $scope.Customers.length; i++) {
                    if ($scope.Customers[i].CustomerId == id) {
                        $scope.Customers[i].Add = $scope.Customers[i].Selected;
                        $scope.Customers[i].Edit = $scope.Customers[i].Selected;
                        break;
                    }
                };
            };

            $scope.CheckUncheckAll = function () {
                for (var i = 0; i < $scope.Customers.length; i++) {
                    $scope.Customers[i].Selected = $scope.IsAllChecked;
                    $scope.Customers[i].Add = $scope.IsAllChecked;
                    $scope.Customers[i].Edit = $scope.IsAllChecked;
                }
            };

            $scope.CheckUncheckIdOnAdd = function (id) {
                for (var i = 0; i < $scope.Customers.length; i++) {
                    if ($scope.Customers[i].CustomerId == id) {
                        $scope.Customers[i].Selected = $scope.Customers[i].Add;
                        break;
                    }
                }
                $scope.CheckUncheckHeader();
            };

            $scope.CheckUncheckIdOnEdit = function (id) {
                for (var i = 0; i < $scope.Customers.length; i++) {
                    if ($scope.Customers[i].CustomerId == id) {
                        $scope.Customers[i].Selected = $scope.Customers[i].Edit;
                        break;
                    }
                }
                $scope.CheckUncheckHeader();
            };
        });
    </script>
</head>
<body>
    <div ng-app="MyApp" ng-controller="MyController">
        <table cellpadding="0" cellspacing="0">
            <tr>
                <th align="left">
                    <label>
                        <input type="checkbox" ng-model="IsAllChecked" ng-change="CheckUncheckAll()" />
                        CustomerId
                    </label>
                </th>
                <th>Name</th>
                <th>Country</th>
                <th>Add</th>
                <th>Edit</th>
            </tr>
            <tbody ng-repeat="m in Customers">
                <tr>
                    <td>
                        <label for="chkCustomer_{{m.CustomerId}}">
                            <input id="chkCustomer_{{m.CustomerId}}" type="checkbox" ng-model="m.Selected" ng-change="CheckUncheckHeader();CheckUncheckRow(m.CustomerId)" />
                            {{m.CustomerId}}
                        </label>
                    </td>
                    <td>{{m.Name}}</td>
                    <td>{{m.Country}}</td>
                    <td><input type="checkbox" ng-model="m.Add" ng-change="CheckUncheckIdOnAdd(m.CustomerId)" /></td>
                    <td><input type="checkbox" ng-model="m.Edit" ng-change="CheckUncheckIdOnEdit(m.CustomerId)" /></td>
                </tr>
            </tbody>
        </table>
    </div>
</body>
</html>

Demo

I agree, here is the link: https://www.e-iceblue.com/Introduce/spire-office-for-net-free.html

Check uncheck all CheckBox in Table Row based on condition in AngularJS

Company

Explore

Follow us

Contact Us