angularjs - cascading selects use model data from first select

I'm attempting to get at the version data stored inside the server model, however, it's not playing ball.

My assumption is that on load the initial data from the first select is not yet available because it hasn't really been selected (technically speaking). I tried to use trigger('click') whether this would help at all, but it did absolutely nothing. I can't seem to find any answers out there and I have a feeling I maybe tackling it from the wrong end.

edit: Forgot to mention, if I have to restructure my data to allow for this to happen, so be it.

Here's all my code + JSFiddle:

http://jsfiddle.net/h8uoy9xr/3/

HTML:

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.1/angular.min.js"></script>
<div ng-app>
    <div ng-controller="MyCntrl">
        <div class="selection" ng-repeat="selection in selections">
            <select ng-model="server" ng-options="server as server.name for server in servers track by server.id" ng-init="server.id=selection.server"></select>
            {{ server | json }}
            <select ng-model="version" ng-options="version as version.name for version in server.version track by version.id" ng-init="version.id=selection.version"></select>
        </div>
    </div>
</div>

JS:

function MyCntrl($scope) {

    $scope.servers = [
        {
           "id": 1,
           "name": "server1",
           "version":
           [
               {
                   id:1,
                   name: "10.x"
               },
               {
                   id:3,name: "12.x"
               }
           ]
        },
        {
           "id": 2,
           "name": "server2",
           "version":
           [
               {
                   id: 2,
                   name: "1.0"
               },
               {
                   id: 3,
                   name: "2.0"
               }
           ]
        }
    ];

    $scope.selections = [
        {
            server: 2,
            version: 3
        },
        {
            server: 1,
            version: 3
        }
    ];

}

cascading dropdownlist inside ng-repeat

Answers:

Answer

Here's a working solution of the above problem. I hadn't realized angularjs did things a wee bit differently with the models, but finally it clicked. See below code + fiddle for anyone needing something similar in the future:

Fiddle: http://jsfiddle.net/mmy6z57g/2/

Fiddle: http://jsfiddle.net/mmy6z57g/3/ (added a button to demonstrate how additional servers can be added)

HTML:

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<div ng-app="test">
    <div ng-controller="MyCntrl">
        <div class="selection" ng-repeat="xserver in xservers">
            <select ng-model="xservers[$index]" ng-options="server as server.name for server in servers track by server.id"></select>
            <select ng-model="xversions[$index]" ng-options="version as version.name for version in xservers[$index].version track by version.id"></select>
        </div>
    </div>
</div>

JS:

var app = angular.module('test', []);

app.controller('MyCntrl', function($scope) {
    $scope.servers = [
        {
           id: 1,
           name: "server1",
           version:
           [
               {
                   id:1,
                   name: "10.x"
               },
               {
                   id:3,
                   name: "12.x"
               }
           ]
        },
        {
           id: 2,
           name: "server2",
           version:
           [
               {
                   id: 2,
                   name: "1.0"
               },
               {
                   id: 3,
                   name: "2.0"
               }
           ]
        }
    ];

    $scope.xservers = [
        {
            id: 2,
            name: "server2",
            version:
           [
               {
                   id: 2,
                   name: "1.0"
               },
               {
                   id: 3,
                   name: "2.0"
               }
           ]
        },
        {
            id: 1,
            name: "server1",
            version:
           [
               {
                   id:1,
                   name: "10.x"
               },
               {
                   id:3,
                   name: "12.x"
               }
           ]
        }
    ];

    $scope.xversions = [
        {
           id: 3,
           name: "2.0"
        },
        {
            id: 3,
            name: "12.x"
        }
    ];
});
Answer

Could you use your controller and use a .then(); so that it selects the first one and when that is done then it selects the second? User wouldn't see it and it would solve the issue of second one not getting selected.

Tags

Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us

©2020 All rights reserved.