Question

我开始为Web应用程序学习AngularJS，我在理解框架的工作流程时遇到了问题。

我有2个下拉菜单：

<select class='selectorDropdown' ng-model='selectedElement' ng-change='selectedElementChange()'>
    <option value='0' disabled selected>Option0
    <option value='1'>Option1
    <option value='2'>Option2
</select>

<select class='selectorDropdown' id='selector2' disabled>
    <option value='3'>Option1
    <option value='4'>Option2
</select>

我希望只有在第一个下拉列表中选择了除Option0之外的其他选项后才能启用第二个下拉列表。所以这是我的Javascript代码：

$scope.selectedElementChange = function() {
    document.getElementById('selector2').disabled = true;
}

到目前为止，它看起来像普通的Javascript（我正在操纵DOM），所以我猜这不是AngularJS的意思。有人可以帮我理解使用AngularJS做到这一点的“正确”方法吗？

Answer 1

这样的东西应该可以工作，而无需编写一行JavaScript：

<select class='selectorDropdown' id='selector2' ng-disabled='selectedElement == "0"'>
    <option value='3'>Option1
    <option value='4'>Option2
</select>

您也不需要ng-change。 Angular负责在第一个选择器更改时更新模型，然后运行摘要循环以更新其他任何内容。

您还需要在某处初始化selectedElement; Angular并没有从您在selected元素上编写Option0的事实中获取其价值。最干净的方法是在控制器中执行此操作：

$scope.selectedElement = "0";

快速而肮脏的方式是ng-init：

<select ... ng-init='selectedElement = "0"'>

Plunk.

使用AngularJS禁用/启用html元素

1 个答案: