angularjs - 级联选择使用第一个选择的模型数据

Question

我正在尝试获取存储在 server 模型中的 version 数据，但是它不是在玩球。

我的假设是加载时第一次选择的初始数据尚不可用，因为它还没有真正被选择（从技术上讲）。我尝试使用trigger('click') 这是否会有所帮助，但它完全没有任何作用。我似乎找不到任何答案，我觉得我可能从错误的角度解决了这个问题。

编辑：忘了说，如果我必须重组我的数据以允许这种情况发生，那就这样吧。

这是我所有的代码 + 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

Answer 1

这是上述问题的有效解决方案。我没有意识到 angularjs 对模型的处理方式略有不同，但最终它成功了。对于将来需要类似东西的人，请参阅下面的代码+小提琴：

小提琴：http://jsfiddle.net/mmy6z57g/2/

小提琴：http://jsfiddle.net/mmy6z57g/3/（添加了一个按钮来演示如何添加其他服务器）

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 2

您可以使用您的控制器并使用 .then();以便它选择第一个，完成后选择第二个？用户不会看到它，它会解决第二个没有被选中的问题。