I'm dealing with an AngularJS issue where I'm trying to create a cascade dropdown like the one 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>
Now, in 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 successfully returns data and the SubType scope captures it. However, there seems to be an issue with updating the dropdown data for PropertySubType. *Note that this function is within the LOV controller.