dynamically created dropdowns with populated arrays don't update using angular

Question

My first dropdown loads correctly on page load, but the child dropdown loads after the first dropdown from localstorage. Problem is when I load the 2nd dropdown and assign it the default value I can no longer change its value. http://jsfiddle.net/silvajeff/x2nrX/3/

angular.module('demoApp', []).controller('DemoController', function($scope) {
  //my first drop down loads with the page
  $scope.options = [
     { label: 'one', value: 1 },
     { label: 'two', value: 2 },
     { label: 'three', value: 3 },
     { label: 'four', value: 4 },
     { label: 'five', value: 5 }
  ];  

  $scope.firstSelect = $scope.options[3];  

//the second drop down loads after the first makes a selection. In the real code I am     populating the second from localstorage, but once it's assigned its default value I cannot change it.    
var init = function(){
   //depends on what was selected in first select
    $scope.captions = [
       { name: 'A', value: 'a' },
       { name: 'B', value: 'b' },
       { name: 'C', value: 'c' },
       { name: 'D', value: 'd' },
       { name: 'E', value: 'e' }
   ]; 
    $scope.secondSelect = $scope.captions[1];
}   
init();

});

sylwester · Accepted Answer · 2014-07-19 13:42:27Z

Please change ng-if for ng-show and second drop down will work http://jsfiddle.net/Wc4CQ/

<body ng-app="demoApp">
    <div ng-controller="DemoController">

        <div>

            <select ng-model="firstSelect"
                ng-options="opt as opt.label for opt in options">
            </select>
<br><br>
            <select  ng-show="firstSelect.value == '4'" ng-model="secondSelect"
                ng-options="opt as opt.name for opt in captions">
            </select><br>
            The first select value is {{ firstSelect.value }}<br>
            Why can't I get the second select value to update: {{ secondSelect.value }}
        </div>

    </div>
</body>

or if you have to us ng-if please see here : http://jsfiddle.net/y5Bvv/

<body ng-app="demoApp">
    <div ng-controller="DemoController">
        <div>
            <select ng-model="firstSelect" ng-options="opt as opt.label for opt in options"></select>
            <br>
            <br>
            <select ng-if="firstSelect.value == '4'" ng-model="secondSelect.select" ng-options="opt as opt.name for opt in captions"></select>
            <br>The first select value is {{ firstSelect.value }}
            <br>Why can't I get the second select value to update: {{ secondSelect.select.value }}</div>
    </div>
</body>

JS:

angular.module('demoApp', []).controller('DemoController', function ($scope) {
    //my first drop down loads with the page
    $scope.options = [{
        label: 'one',
        value: 1
    }, {
        label: 'two',
        value: 2
    }, {
        label: 'three',
        value: 3
    }, {
        label: 'four',
        value: 4
    }, {
        label: 'five',
        value: 5
    }];
    $scope.firstSelect = $scope.options[3];

    //the second drop down loads after the first makes a selection. In the real code I am populating the second from localstorage, but once it's assigned its default value I cannot change it.    
    var init = function () {
        //depends on what was selected in first select
        $scope.captions = [{
            name: 'A',
            value: 'a'
        }, {
            name: 'B',
            value: 'b'
        }, {
            name: 'C',
            value: 'c'
        }, {
            name: 'D',
            value: 'd'
        }, {
            name: 'E',
            value: 'e'
        }];
        $scope.secondSelect = {};
        $scope.secondSelect.select = $scope.captions[1];
    }
    init();

});

Collectives™ on Stack Overflow

dynamically created dropdowns with populated arrays don't update using angular

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related