angularjs

Question

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

我的假设是加载时第一个 select 的初始数据尚不可用，因为它还没有真正被 selected（从技术上讲）。我尝试使用 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

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

Answer 2

这是上述问题的有效解决方案。我没有意识到 angularjs 对模型做的事情有点不同，但最终它点击了。请参阅下面的代码 + fiddle 以供将来需要类似内容的任何人使用：

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

Fiddle：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"
        }
    ];
});

angularjs - 级联 selects 使用来自第一个 select 的模型数据

angularjs - cascading selects use model data from first select

javascript

angular-ngmodel

ng-options

angularjs-ng-model