在父/子型号AngularJS默认ngOptions [英] default ngOptions on parent/child models AngularJS

问题描述

我如何分配默认 ngOptions 通过父/子型号？

How do I assign default ngOptions through parent/child models?

<一个href=\"http://stackoverflow.com/questions/17700734/switching-data-models-in-angularjs-for-dynamic-select-menus/17701334\">In这个问题 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" }
        ]
    }
];

您将看到在 这个叉 是下拉式菜单中没有任何默认值---也就是说，默认选项为空白的。在正常情况下使用，这是一个是非问题，默认选项是很容易通过它很好地解释的

What you will see in this fork is that the dropdowns do not have any default values --- That is, the default option is "blank". In a normal use case this is a non issue, and default options are easily configurable through the controller which is explained well in the docs.

• 如何消除对使用父/子模型空白选项 ngOptions ？


• 我选择通过视图或默认选项为如何动态通过控制器。的它要记住，孩子默认选择选项的第一个取决于所选选项父母是很重要的。的

• How do I eliminate "blank" options for parent/child models using ngOptions?
• How do I select default options either through the view or dynamically through the controller. It's important to remember here that the child default select options are first dependant on the parents selected option.

推荐答案

空项是由空模型值造成的。您可以尝试把下面的code在控制器的末端。关键是要初始化的网站的建筑的和的地板的网页时加载，以及时的网站的值被改变。希望它帮助。

The blank item is caused by the empty model value. You can try to put the following code at the end of the controller. The trick is to initialize site, building and floor when the page is loaded as well as when the site value is changed. Hope it helps.

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

这篇关于在父/子型号AngularJS默认ngOptions的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！