javascript - 使用 AngularJS 禁用/启用 html 元素

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 不会从您在 Option0 元素上编写 selected 的事实中获取其值。最简洁的方法是在 Controller 中执行此操作:

$scope.selectedElement = "0";

快速但肮脏的方法是ng-init:

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

Plunk.