父/子模型AngularJS上的默认ngOptions
default ngOptions on parent/child models AngularJS
如何通过父/子模型分配默认ngOptions
?
在这个问题中OP显示了使用ngOptions
形成父/子关系的方法
模板
<select ng-model="x.site" ng-options="s.site for s in data"></select>
<select ng-model="x.name" ng-options="b.name for b in x.site.buildings"></select>
控制器
$scope.x = {};
$scope.data = [
{
"site" : "Brands Hatch",
"buildings" : [
{ "name" : "Building #1" },
{ "name" : "Building #2" },
{ "name" : "Building #3" }
]
},{
"site" : "Silverstone",
"buildings" : [
{ "name" : "Building #4" },
{ "name" : "Building #5" },
{ "name" : "Building #6" }
]
}
];
您将在这个分叉中看到的是下拉菜单没有任何默认值——也就是说,默认选项是"blank"。在正常使用情况下,这不是问题,并且可以通过控制器轻松配置默认选项,这在文档中有很好的解释。
- 如何使用
ngOptions
消除父/子模型的"空白"选项 - 如何通过视图或通过控制器动态选择默认选项重要的是要记住,子级默认选择选项首先取决于父级选择选项
空项是由空的模型值引起的。您可以尝试将以下代码放在控制器的末尾。诀窍是在加载页面以及更改站点值时初始化网站、建筑和楼层。希望能有所帮助。
$scope.selected = {
site: $scope.data[0],
building: $scope.data[0].buildings[0],
floor: $scope.data[0].floors[0]
};
$scope.$watch('selected.site', function () {
console.log($scope.selected.site);
$scope.selected = {
site: $scope.selected.site,
building: $scope.selected.site.buildings[0],
floor: $scope.selected.site.floors[0]
};
});
相关文章:
- 用嵌套函数和默认函数定义函数
- 如何使用铁流星与流星的默认路线
- 防止Alt+Shift默认操作或检测多种操作系统语言的Javascript
- CKeditor:更改对话框中的默认选择选项
- 在不阻止默认行为的情况下检测IE10中的缩放
- 如何从外部页面激活非默认引导选项卡
- 防止默认锚点行为AngularJS
- 我的shareService在angular 2中发送值工作正常,但当我渲染我的另一个组件时,会获得默认值
- jpm的默认Firefox路径没有'不起作用
- jquerydatetimepicker日期和时间应在框默认值中,而无需单击框
- 如果值为空,如何设置输入的默认值?jQuery
- 骨干模型默认值-todos.js示例中不必要的代码
- jquery日期选择器年份范围默认值
- jQuery:当屏幕大小改变时,如何更改默认图像和悬停图像
- Highcharts-如何在自定义格式化程序中获得默认的y轴标签格式化程序
- 默认情况下折叠和展开嵌套列表
- 使用AngularJS中的UI路由器将状态重定向到默认子状态
- 父/子模型AngularJS上的默认ngOptions
- AngularJS ngOptions选择默认选项
- 如何设置ngOptions的默认值,当options是对象时,default是一个整数ID