[Solved] Change in one row of DropDownList reflects in all rows using AngularJS in ASP.Net MVC

Last Reply 11 months ago By dharmendr

Posted 11 months ago

hello Sir 

i have a two row and in single row there is a three dropdown and in key month column i have  taken div inside td and bind three month with checkboxbut

sir problem is that when i check april month then next row april month also checked again if i check may month then next row may month also check.

@page
@{
    ViewData["Title"] = "SalesDetailallocate";
    Layout = "~/Pages/Shared/_Layout.cshtml";
}

<h2>Sales Unit Allocation</h2>
<div ng-controller="CtrlSalesDetailallocate">
    <div class="row">
        <div class="col-xs-12 col-sm-12">            
            <div class="row">
                <div class="col-sm-12 col-xs-12">
                    <div class="tabbable">
                         <div>
                            <div>
                                <table id="dynamic-table" class="table table-striped table-bordered table-hover">
                                    <thead>
                                        <tr>
                                            <th>S.No</th>
                                            <th>Sales Unit</th>
                                            <th class="hide">UserID</th>
                                            <th>Tehsil</th>
                                            <th>Industry</th>
                                            <th>SOLIS Volumes (For financial Year)</th>
                                            <th>MS</th>
                                            <th>Total No of Villages</th>
                                            <th>Total No of Focus Villages</th>
                                            <th>Main Crops</th>
                                            <th>%age of Main crop in Tehsil</th>
                                            <th>Focus Application</th>
                                            <th>Key Months</th>
                                            <th>Key Competitor Model</th>
                                            <th>Action</th>
                                        </tr>
                                    </thead>

                                    <tbody>
                                        <tr ng-repeat="x in DTunitMaster">
                                            <td>{{$index + 1}}</td>
                                            <td>{{x.SaleUnitName}}</td>
                                            <td class="hide">{{x.TehsilID}}</td>
                                            <td>{{x.TehsilName}}</td>
                                            <td>{{x.Ind}}</td>
                                            <td>{{x.DOJ}}</td>
                                            <td>{{x.DOB}}</td>
                                            <td>{{x.TotalVillage}}</td>
                                            <td>{{x.address}}</td>
                                            <td style="width:50%;">
                                                <select class="col-xs-12" style="height:34px; width:100px;" id="ddlmaincrop1">
                                                    @*<option value="0">Select Month </option>*@
                                                    <option value="0">Select Main Crop-1</option>
                                                    <option ng-repeat="x in DTCrop1" value="{{x.CropId}}">
                                                        {{x.CropName}}
                                                    </option>
                                                </select>                                                
                                            </td>
                                            <td style="width:50%;">
                                                <select class="col-xs-12" style="height:34px; width:100px;" id="ddlmaincropPer1">
                                                    @*<option value="0">Select Month </option>*@
                                                    <option value="0">Select Crop Per(%)-1</option>
                                                    <option ng-repeat="x in DTCropper1" value="{{x.MainCropId}}">
                                                        {{x.CropPercentage}}
                                                    </option>
                                                </select>                                                
                                            </td>
                                            <td>
                                                <div class="col-xs-12 col-sm-4">                                                   
                                                    <div style="width:80px; height:50px; border-color: Black; border-width:1px; border-style:inset; overflow:auto; font-family:Palatino Linotype;
                                                    font-size:13.3333px; font-weight: 400; font-style: normal; word-wrap:normal;">
                                                        <div ng-repeat="x in DTunitMonth">
                                                            <div ng-if="x.MonthID != ''">
                                                                <input id="ddlmon1" type="checkbox" ng-model="MonCheckedStatus1[$index]" ng-checked="Monchecked1[$index]" ng-change="MonChange1(x.MonthID, $index)" />
                                                                {{x.MonthName}}
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div style="width:80px; height:50px; border-color: Black; border-width:1px; border-style:inset; overflow:auto; font-family:Palatino Linotype;
                                                    font-size:13.3333px; font-weight: 400; font-style: normal; word-wrap:normal;">
                                                        <div ng-repeat="x in DTunitMonth">
                                                            <div ng-if="x.MonthID != ''">
                                                                <input id="ddlmon2" type="checkbox" ng-model="MonCheckedStatus2[$index]" ng-checked="Monchecked2[$index]" ng-change="MonChange2(x.MonthID, $index)" />
                                                                {{x.MonthName}}
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div style="width:80px; height:50px; border-color: Black; border-width:1px; border-style:inset; overflow:auto; font-family:Palatino Linotype;
                                                    font-size:13.3333px; font-weight: 400; font-style: normal; word-wrap:normal;">
                                                        <div ng-repeat="x in DTunitMonth">
                                                            <div ng-if="x.MonthID != ''">
                                                                <input id="ddlmon3" type="checkbox" ng-model="MonCheckedStatus3[$index]" ng-checked="Monchecked3[$index]" ng-change="MonChange3(x.MonthID, $index)" />
                                                                {{x.MonthName}}
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </td>
                                            <td style="width:50%;">
                                                <select class="col-xs-12" style="height:34px; width:100px;" id="ddlKcModel1">
                                                    <option value="0">Select Key Model-1 </option>
                                                    <option ng-repeat="x in DTKeyModel1" value="{{x.ModelId}}">
                                                        {{x.ModelName}}
                                                    </option>
                                                </select>
                                                <select class="col-xs-12" style="height:34px; width:100px;" id="ddlKcModel2">
                                                    <option value="0">Select Key Model-2 </option>
                                                    <option ng-repeat="x in DTKeyModel2" value="{{x.ModelId}}">
                                                        {{x.ModelName}}
                                                    </option>
                                                </select>
                                                <select class="col-xs-12" style="height:34px; width:100px;" id="ddlKcModel3">
                                                    <option value="0">Select Key Model-3 </option>
                                                    <option ng-repeat="x in DTKeyModel3" value="{{x.ModelId}}">
                                                        {{x.ModelName}}
                                                    </option>
                                                </select>
                                            </td>
                                            <td><button type="button" class="btn btn-sm btn-primary" id="btn1" ng-click="SaveSaleUnit($index);">SaveSale</button></td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>                           
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@section Scripts {
    <script src="~/DeveloperJS/SalesDetail/SalesDetailallocate.JS" asp-append-version="true"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <link href="~/css/jquery.multiselect.css" rel="stylesheet" />
    <script src="~/ace-master/assets/js/jquery.multiselect.js"></script>
    <script type="text/javascript">
        $('#btnNext').click(function () {
            $('.nav-tabs > .active').next('li').find('a').trigger('click');
        });
        $(document).ready(function () {            
            $("#ddlselectstate").on('change', function () {
                $("#ddlselectstate").not(this).prop('checked', false);
            });
        });

        $('select[multiple]').multiselect({
            columns: 4,
            placeholder: 'Select options'
        });
    </script>
}

 

Posted 11 months ago