angularjs - 级联选择使用模型数据从第一选择 [英] angularjs - cascading selects use model data from first select
问题描述
我试图在版本,以获得存储在
数据,但是,它不打球。服务器
模型内部
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"
}
];
});
这篇关于angularjs - 级联选择使用模型数据从第一选择的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!