CODEWITHSUNDEEP
angularjsajaxcascadingdropdown
WendyG
WendyG

Reputation: 587

AngularJS cascaded drop downs, dependant dropdown not filling in

So I have 2 drop downs which need selecting before a third one can be populated.

The problem is even with data coming back the 3rd one isn't populating.

Because of how it is designed each dropdown has it's own controller, with another one for the whole window.

Source widget:

<select class="form-control" required name="dataDomain"
        ng-model="customFilters.dataDomain.value"
        ng-options="dataDomain.code as dataDomain.shortName for dataDomain in dataDomains"
        ng-change="customFilters.dataDomain.loadExtraData()">
        <option value="" translate>_NONE_</option>
    </select>

source controller:

(function init() {
    $scope.customFilters = reportsService.filters;

    $scope.customFilters.dataDomain = {
      value: undefined,
      loadExtraData: function() {
              var reportType;
              if(this.containsData() && !this.isDisabled()) {
                  reportType = reportsService.filters.reportType.value;


                  dictionaryService.getCustomReports({"dataDomain": 'WEE', "country": 'UK')
                          .then(function ({data}) {
                            $scope.customReports = data.customReport; 
                      });

              }
          }
    };
})();

The target widget:

<select class="form-control" required name="custom"
            ng-model="customFilters.custom.value"
            ng-options="c.reportUrl as c.reportName for c in customReports">

            <option value="" translate>_NONE_</option>
</select>

whole window controller:

 $scope.customReports = [];

As a test to ensure My target widget is looking at the correct location I have also tried in the whole window controller The target dropdown was populated with frank and Joe.

$scope.customReports = [{reportUrl:'hello',reportName:'Frank'},{reportUrl:'hello2',reportName:'Joe'}];

Why isn't the dropdown being populated after the ajax call? (see edit 3)

Edit 1: I have removed excess ajax calls and conditional functionality from the source widget controller. Hopefully to make it easier to see. I may have got my brackets wrong.

Edit 2: I did some debugging and the scope ID in the source was 47 and in the target it was 50. I have no idea what these numbers mean, but it shows I am not storing my data in the same space.

Edit 3: I FIXED IT (by just trying everything), But i don't know why I moved the customReports data to $scope.customFilters.customReports so the question has changed to WHY IS THIS WORKING!!!!

Upvotes: 0

Views: 32

Answers (1)

Gowthaman
Gowthaman

Reputation: 1292

Because of how it is designed each dropdown has it's own controller, with another one for the whole window.

This is the key! You have defined $scope.customReports inside wholeController which has a different scope than your dropdown. That is the reason you were able to fix it once you moved it inside $scope.customFilters.customReports which is the same scope as that of the dropdown.

From angularjs documentation

Each AngularJS application has exactly one root scope, but may have several child scopes.

This blog explains it in detail about Understanding Angularjs scope $rootScope and $scope.

Upvotes: 1

Related Questions