Javascript 角度HTML选择选项禁用和启用

我有一个html选择选项

<select>
    <option ng-repeat="field in filter.fields" value="{{field.id}}">{{field.name}}</option>
</select>

{{field.name}

我从ng repeat开始迭代，我想根据一个可选择的字段禁用该选项，如

<select>
    <option ng-repeat="field in filter.fields" {field.selectable==true?enable:disable} value="{{field.id}}">{{field.name}}</option>
 </select>

{{field.name}

---

如何使用angular实现这一点？

假设您有这样的结构：

  $scope.filter = {
    fields: [
      {id: 1, name: "a", selectable: false},
      {id: 2, name: "asdf", selectable: true},
      {id: 3, name: "qwet", selectable: false},
      {id: 4, name: "qnjew", selectable: true},
      {id: 5, name: "asdjf", selectable: false}
    ]
  };

这应该适合您：

  <select>
    <option ng-repeat="field in filter.fields" ng-disabled="field.selectable" value="{{field.id}}">{{field.name}}</option>
  </select>

{{field.name}

虽然ng disabled属性在技术上可以工作，但在使用ng repeat on选项时，您可能会遇到错误。这是一个众所周知的问题，也是angular团队创建ng选项的原因。目前还没有同时使用ng选项和ng disabled的角度实现，但Alec LaLonde创建了此自定义指令，您可以将其添加并使用。还有

---

这其实是一个相当古老的问题。在Angular（Angular 1.4+）的更高版本中，您有ngOptions指令。以下是链接：-

现在有一种处理这种情况的语法：-

label disable when disable for value in array track by trackexpr

---

我想我会把它放在这里，以防其他人访问此页面。

通常使用angularjs创建选择列表时，您使用的是ng选项指令，尽管我不知道它内置了禁用选项的支持（您可能需要复制/调整源代码）另一个可能有助于您处理此问题的指令是ng禁用。您是否有意不将

select

输入的值绑定到模型？我认为可能的重复不是重复，因为

元素的迭代和呈现方式是不同的。我仍然建议您看看m59的答案。他强调的我的解决方案中的问题可能会再次困扰你。我已经更新了引用的JS Fiddle以与JQLite合作：

label disable when disable for value in array track by trackexpr