Angular HTML Select 选项禁用和启用

Posted 2023-03-05

【中文标题】Angular HTML Select 选项禁用和启用

【英文标题】：Angular HTML Select option disable and enable

【发布时间】：2013-09-14 09:23:21

【问题描述】：

我有一个 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 实现这一点？

【问题讨论】：

通常要使用 angularjs 创建一个选择列表，您使用的是 ng-options 指令，尽管我不知道它内置了对禁用选项的支持（您可能需要复制/调整源) 要注意的另一个指令可能有助于您尝试处理此问题的方式是 ng-disabled docs.angularjs.org/api/ng.directive:ngDisabled

您是否有意不将select 输入的值绑定到模型？

ng-options with disabled rows的可能重复

在我看来不是重复的，因为 <option> 元素的迭代和渲染方式不同。

【参考方案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>

【讨论】：

我仍然建议您看看 m59 的答案。他强调的我的解决方案的问题可能会再次困扰您。

【参考方案2】：

虽然 ng-disabled 属性在技术上有效，但在选项上使用 ng-repeat 时可能会遇到错误。这是一个众所周知的问题，也正是 Angular 团队创建 ng-options 的原因。目前还没有一个角度实现来同时使用 ng-options 和 ng-disabled，但是 Alec LaLonde 创建了这个自定义指令，您可以添加和使用它。 See the issue forum here: https://github.com/angular/angular.js/issues/638 和 jsfiddle from that post。

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';

【讨论】：

我已经更新了引用的 JS Fiddle 以使用 JQLite：link

【参考方案3】：

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

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

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

label disable when disable for value in array track by trackexpr

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