angularjs - 下拉菜单依赖于其他下拉菜单在 id/name 组合时不起作用

angularjs - Dropdown depends on other dropdown not working when id/name combo

我一直在使用@Brocco 提供的解决方案:Dropdown depends on other dropdown - angularjs

我注意到,当您在供 Angular 使用的对象中使用 ID/Name 组合时,它会自动失败。我已经使用提供的 JSFiddle AngularJS 版本以及最新的 AngularJS 版本对此进行了测试,但在这两种情况下都失败了。

JSFiddle:

http://jsfiddle.net/h8uoy9xr/(已更新 fiddle link)

HTML:

<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.6/angular.min.js"></script>
<div ng-app>
    <div ng-controller="MyCntrl">
        <select ng-model="server" ng-options="server.id as server.name for server in servers"></select>
        <!-- server.name for server in servers (This works a treat, but not the other way) -->
        <select ng-model="version" ng-options="version.id as version.name for version in server.version"></select>
    </div>
</div>

JS:

function MyCntrl($scope) {


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


}

如果你 display the value of the server 你会发现它只获取了 id,而不是分配的整个对象。

改变

ng-options="server.id as server.name for server in servers"

ng-options="server as server.name for server in servers"

为了get it working.

as关键字前的值保存到模型中。后面的值用作下拉列表中的标签。