1

如何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" }
        ]
    }
];

您将在这个分叉中看到的是下拉菜单没有任何默认值——也就是说，默认选项是“空白”。在正常用例中，这不是问题，默认选项可以通过控制器轻松配置，这在 docs 中有很好的解释。

  • 如何使用 消除父/子模型的“空白”选项ngOptions？
  • 如何通过视图或通过控制器动态选择默认选项。重要的是要记住，子默认选择选项首先取决于父母选择的选项。
4

1 回答 1

2

空白项是由空模型值引起的。您可以尝试将以下代码放在控制器的末尾。诀窍是在加载页面以及更改站点值时初始化站点、建筑物和楼层。希望能帮助到你。

$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]
    };
});
于 2013-08-02T17:58:09.233 回答