Question

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

我的假设是，在加载时，第一个选择的初始数据尚未可用，因为它尚未真正被选中（从技术上讲）。我试图使用trigger('click')这是否会有所帮助，但它绝对没有。我似乎无法找到任何答案，我有一种感觉，我可能从错误的一端解决它。

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

这是我的所有代码+ JSFiddle：

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（）;所以它选择第一个，当它完成后，它选择第二个？用户不会看到它，它将解决第二个未被选中的问题。

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

2 个答案: