angular select refresh on change

Question

I am working on a page that has 2 select lists, each populated by a call from a REST service:

  var mainApp = angular.module('taxonomyViewer', []);

    mainApp.controller('apiTaxonomyController', function ($scope, $http) {

        $scope.taxonomyList = []; // the taxonomy list for the first select list
        $scope.taxonomyStates = []; // the state list for the taxonomy selected in the first list

        $http({
            method: 'GET',
            url: '/api/reports/taxonomies'
        }).then(function (response) {
            $scope.taxonomyList = angular.fromJson(response.data);
            console.log($scope.taxonomyList);
        });

        $scope.update = function () {
            $http({
                method: 'GET',
                // api/reports/taxonomies/{ent_id}/states
                url: '/api/reports/taxonomies/' + $scope.selectedItem + '/states'
            }).then(function (response) {
                $scope.taxonomyStates = angular.fromJson(response.data);
                console.log($scope.taxonomyStates);

            });
            console.log("selected item: " + $scope.selectedItem);
        };

My select lists are here:

 <div class="col-md-4">
    <div ng-app="taxonomyViewer" ng-controller="apiTaxonomyController">
        <select ng-model="selectedItem"
                ng-options="items.ent_id as items.ent_desc for items in taxonomyList"
                ng-change="update()">
            <option value=""> Select Taxonomy </option>
        </select>

    </div>
    <br />
    <div ng-app="taxonomyViewer" ng-controller="apiTaxonomyController">
        <select ng-model="selectedState"
                ng-options="items.ens_guid as items.enk_name + ' - ' + items.sg_name for items in taxonomyStates"
                ng-change="updateState()">
            <option value=""> Select Taxonomy State </option>
        </select>

        <br />
    </div>
    <div id="taxonomyTree" class="fancytree-fade-expander">
    </div>

</div>

When you select an item from the first list, the REST service is called and then the second list should populate. The REST service is getting called from inside the $scope.update function but the select list is not loading the $scope.taxonomyStates items.

Any error messages from the console?

cChacon
– cChacon

2017-10-13 15:29:25 +00:00
Commented Oct 13, 2017 at 15:29 — cChacon
– cChacon, Commented Oct 13, 2017 at 15:29

UncleDave · Accepted Answer · 2017-10-13 15:38:02Z

1

You're attaching both your app and controller twice - this creates two apps and two controllers.

When your update method grabs the data it is assigning it to taxonomyStates on app 1, as that is where update is called. However app 2 is the one trying to display it.

ng-app="taxonomyViewer" ng-controller="apiTaxonomyController"

These attributes should be on the highest DOM element it makes sense for them to be on. Based on this example - I would say ng-controller should go on your col-md-4 div, and ng-app should almost always be on the body or an element directly below.

edited Oct 13, 2017 at 15:38

answered Oct 13, 2017 at 15:32

UncleDave

7,2492 gold badges29 silver badges45 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

davelm42 Over a year ago

That worked thank you. I'm new to angular, so I'm still getting through some of the model.

Collectives™ on Stack Overflow

angular select refresh on change

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related