Angular HTML选择选项禁用和启用

Question

我有一个HTML的选择框

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

从ng-repeat迭代的内容中，我希望根据可选择字段来禁用选项。

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

我该如何在Angular中实现这个？

- Satish Sharma

---

通常使用AngularJS制作选择列表时，您会使用ng-options指令，但我不知道它是否内置支持禁用选项（您可能需要复制/调整源代码）。另一个要注意的指令是ng-disabled，它可能有助于处理您正在尝试处理的方式。http://docs.angularjs.org/api/ng.directive:ngDisabled - shaunhusain

你是否有意将 select 输入框的值与模型绑定？ - bibs

可能是重复的问题：使用禁用行的ng-options - m59

在我看来，这不是一个重复问题，因为迭代和渲染<option>元素的方式是不同的。 - Amy Pellegrini

Answer 1

假设您有这样的结构：

  $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>

- user1364910

---

我仍然建议您查看m59的答案。他强调的我的解决方案存在的问题可能会对您造成影响。 - user1364910

Answer 2

虽然ng-disabled属性从技术上讲可以使用，但在选项上使用ng-repeat时可能会遇到错误。这是一个众所周知的问题，也正是Angular团队创建ng-options的原因。目前还没有使用ng-options和ng-disabled的Angular实现，但Alec LaLonde创建了这个自定义指令，您可以添加并使用它。请查看此处的问题论坛：https://github.com/angular/angular.js/issues/638以及该帖子的jsfiddle。

angular.module('myApp', [])
.directive('optionsDisabled', [ '$parse', function($parse) {
        var disableOptions = function($scope, attr, $element, data, fnDisableIfTrue) {
            $element.find('option:not([value="?"])').each(function(i, e) { //1
                var locals = {};
                locals[attr] = data[i];
                $(this).attr('disabled', fnDisableIfTrue($scope, locals));
            });
        };

        return {
            priority: 0,
            require: 'ngModel',
            link: function($scope, $element, attributes) { //2
                var expElements = attributes.optionsDisabled.match(/^\s*(.+)\s+for\s+(.+)\s+in\s+(.+)?\s*/),
                    attrToWatch = expElements[3],
                    fnDisableIfTrue = $parse(expElements[1]);
                $scope.$watch(attrToWatch, function(newValue, oldValue) {
                    if (!newValue) return;

                    disableOptions($scope, expElements[2], $element, newValue, fnDisableIfTrue);
                }, true);

                $scope.$watch(attributes.ngModel, function(newValue, oldValue) { //3
                    var disabledOptions = $parse(attrToWatch)($scope);
                    if (!newValue) return;

                    disableOptions($scope, expElements[2], $element, disabledOptions, fnDisableIfTrue);
                });
            }
        };
    }
]);
//1 refresh the disabled options in the select element
//2 parse expression and build array of disabled options
//3 handle model updates properly

function OptionsController($scope) {
    $scope.ports = [{name: 'http', isinuse: true},
                    {name: 'test', isinuse: false}];

    $scope.selectedport = 'test';
}

- m59

---

我已经更新了引用的 JS Fiddle，使其与 JQLite 兼容：链接 - HANiS

Answer 3

这实际上是一个相当古老的问题。在较新版本的Angular（angular 1.4+）中，您可以使用ngOptions指令。以下是链接：

https://docs.angularjs.org/api/ng/directive/ngOptions

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

label disable when disable for value in array track by trackexpr

我想加入这个页面，以防其他人访问。

- user1545858