Set CheckBoxes checked (selected) on DropDownList change in AngularJS

Last Reply 3 months ago By dharmendr

Posted 3 months ago

Hello Sir,

I have a form using salesunit.cshtml using in this i have state in drop down on behalf on state i have a district on behalf of district selection i have a delaer and on dealer selection i have a tehsil checkbox and salesunit

i can check more than one check box suppose if i check 3 checkbox and select salesunit-1 save the data. again if i go and select state, district, dealer then tehsil come selected which i saved in database.

Suppose i save Bawani Khera , Bhiwani , Loharu - B and salesunit1 then these three checkbox selected will come and in salesunit1 dropdown will come like salesunit1-Bawani Khera, Bhiwani, Loharu - B when i select haryana->bhiwani->vipin enter

How to set selected value of check on dropdownlist change in angular js

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

Hi telldurges,

While returning the DTDealerTehsil from Web API return with on more property as Selected based on the record you saved in database.

Then using the Selected Property you can CheckBox checked.

for more details refer below article.

AngularJS ng-repeat CheckBox checked: Check if CheckBox is checked or not in AngularJS ng-repeat

Check this example.

View

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Index</title>
    <script type="text/javascript" src="https://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, $window) {
            $scope.DTDealer = [
                { DealershipName: "Dealer 1", DealerCode: "1" },
                { DealershipName: "Dealer 2", DealerCode: "2" },
                { DealershipName: "Dealer 3", DealerCode: "3" },
               ];
            $scope.OnDealerChange = function () {
                $scope.DTDealerTehsil = [];
                if ($scope.DealerCode == '1') {
                    $scope.DTDealerTehsil = [
                        { TehsilName: "Tehsil 1", TehsilCode: "1", Selected: false },
                        { TehsilName: "Tehsil 2", TehsilCode: "2", Selected: true },
                        { TehsilName: "Tehsil 3", TehsilCode: "3", Selected: true },
                        { TehsilName: "Tehsil 4", TehsilCode: "4", Selected: false }
                   ];
                } else if ($scope.DealerCode == '2') {
                    $scope.DTDealerTehsil = [
                        { TehsilName: "Tehsil 1", TehsilCode: "1", Selected: true },
                        { TehsilName: "Tehsil 2", TehsilCode: "2", Selected: true },
                        { TehsilName: "Tehsil 3", TehsilCode: "3", Selected: false },
                        { TehsilName: "Tehsil 4", TehsilCode: "4", Selected: true }
                   ];
                } else {
                    $scope.DTDealerTehsil = [
                        { TehsilName: "Tehsil 1", TehsilCode: "1", Selected: false },
                        { TehsilName: "Tehsil 2", TehsilCode: "2", Selected: false },
                        { TehsilName: "Tehsil 3", TehsilCode: "3", Selected: false },
                        { TehsilName: "Tehsil 4", TehsilCode: "4", Selected: true }
                   ];
                }
            };
        });
    </script>
</head>
<body>
    <div ng-app="MyApp" ng-controller="MyController">
        Dealer<select id="ddldealer" ng-model="DealerCode" ng-change="OnDealerChange();"
            ng-init="DealerCode=0">
            <option value="0">--Select Dealer--</option>
            <option ng-repeat="x in DTDealer" value="{{x.DealerCode}}">{{x.DealershipName}}</option>
        </select>
        <br />
        Select Tehsil
        <div ng-repeat="x in DTDealerTehsil">
            <div ng-if="x.TehsilID != ''">
                <input id="ddlselecttehsil" type="checkbox" ng-model="x.Selected" />
                {{x.TehsilName}}
            </div>
        </div>
    </div>
</body>
</html>

Screenshot