angularjs - 级联选择使用模型数据从第一选择模型、级联、数据、angularjs

由网友(少年 舍我其谁。)分享简介:我试图在版本,以获得存储在服务器模型内部数据,但是,它不打球。I'm attempting to get at the version data stored inside the server model, however, it's not playing ball.我的假设是,在负载,因为它并没有真正被选中(...

我试图在版本,以获得存储在服务器模型内部数据,但是,它不打球。

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.

下面是我所有的code +的jsfiddle:

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
        }
    ];

}

级联NG重复内的DropDownList

cascading dropdownlist inside ng-repeat

推荐答案

下面是上述问题的一个可行的解决方案。我没有意识到angularjs与模型做事情一丁点儿的不同,但最后点击它。请参见下面code +捣鼓任何人都需要在今后类似的事情:

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:

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

小提琴: http://jsfiddle.net/mmy6z57g/3/ (增加了一个按钮,演示如何额外的服务器可以加入)

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"
        }
    ];
});
阅读全文

相关推荐

最新文章