在角度

时间:2017-08-09 23:28:54

标签: javascript jquery angularjs

我有两个select下拉列表,第一个下拉列表填充第二个下拉列表。我使用ng-selected预先选择了第一个,但我无法确定如何选择第二个下拉菜单。我尝试过使用$scope.Colours.options,但收到错误:Cannot read property 'options' of undefined error in console log.

    <label for="ColourGroup">Colour Group</label>
    <select id="ColourGroup" class="form-control" ng-model="ColourGroup" ng-options="cgroup as cgroup.a for cgroup in cgroups track by cgroup.v" ng-selected="{{selected.v == cgroup.v}}"></select>


    <label for="Colours">Colour/Woodgrain</label>
    <select id="Colours" class="form-control" ng-model="Colours.options" ng-options="option as option.name for option in ColourGroup.options track by option.id"><option value="">Choose Colour / Woodgrain</option></select>

我这里有一个傻瓜:https://plnkr.co/edit/mFdRlX2CjZnsm8EFZMiZ?p=preview

如果有人能指出我的方向很好,那就很棒。

1 个答案:

答案 0 :(得分:0)

指令ng-init和ng-change可以处理它。只需用此表替换表单标签即可。您也可以在控制器上删除select init。

<form class="form form-inline" ng-controller="Ctrl">

    <label for="ColourGroup">Colour Group</label>
    <select id="ColourGroup" class="form-control" ng-model="ColourGroup" ng-options="cgroup as cgroup.a for cgroup in cgroups track by cgroup.v" ng-init="ColourGroup=cgroups[0]" ng-change="Colours=ColourGroup.options[0]"></select>


    <label for="Colours">Colour/Woodgrain</label>
    <select id="Colours" class="form-control" ng-model="Colours" ng-options="option as option.name for option in ColourGroup.options track by option.id" ng-init="Colours=ColourGroup.options[0]"></select>

</form>