CODEWITHSUNDEEP
javascriptangularjsjsonapi
DevMohammad
DevMohammad

Reputation: 23

angularjs ng-repeat cascading Dropdown not updating

I have this issue using Angularjs i am creating cascade drop down like below

            <div class="col-sm-2 pr10">
            <select class="PropertyType" ng-controller="LOV" ng-init="InitLov(140)" ng-model="PropertyType" ng-change="update(PropertyType)" >
                <option value=""  selected="selected" disabled="disabled"> {{type ? type: 'Property Type'}} </option>
                <!-- <option value="">-- Select Type --</option>-->
                <option ng-repeat="Lov in LovList" value="{{Lov.Value}}" >{{Lov['Lable'+Lang]}} </option>
            </select>
        </div>
        <div class="col-sm-2 pr10">
            <select class="PropertySubType" ng-controller="LOV" ng-model="PropertySubType" >
                <option value="" selected="selected"disabled="disabled" >{{subType ? subType: 'Property Sub Type'}}</option>
                <!--  <option value="">-- Select Sub Type --</option> -->
                <option ng-repeat="Sub in SubType" value="{{Sub.Value}}" >{{Sub['Lable'+Lang]}} </option>
            </select>
        </div>

and the Angular file:

            $scope.update = function (id) {
            $http.post("API/WebsiteService.asmx/getSubPropertyLov", { type: id }).success(function (data) {

                debugger;
                var rr = eval('(' + data.d + ')');
                $scope.SubType = rr.result; 

            });
        }

the API returns data, and the SubType scope gets it, but it doesn't change the dropdown data (PropertySubType), *the function is inside LOV controller.

Upvotes: 1

Views: 605

Answers (1)

dfsq
dfsq

Reputation: 193281

Don't duplicated ng-controller="LOV" on each select, this way they both get different scopes. Put both selects in the scope of the same controller.

Also don't use ngRepeat, use ngOptions:

<div ng-controller="LOV">
  <div class="col-sm-2 pr10">
    <select class="PropertyType" 
      ng-init="InitLov(140)" 
      ng-model="PropertyType" 
      ng-change="update(PropertyType)"
      ng-options="Lov.Value as Lov['Lable' + Lang] for Lov in LovList">
      <option value="" selected="selected" disabled="disabled"> {{type || 'Property Type'}} </option>
    </select>
  </div>
  <div class="col-sm-2 pr10">
    <select class="PropertySubType" 
      ng-options="Sub.Value as Sub['Lable' + Lang] for Sub in SubType"
      ng-model="PropertySubType">
      <option value="" selected="selected" disabled="disabled">{{subType || 'Property Sub Type'}}</option>
    </select>
  </div>
</div>

Upvotes: 1

Related Questions