'AngularJS' 禁用 'option' HTML5 元素的方法是什么？

Question

禁用 'option' HTML5 元素的 'AngularJS' 方法是什么？

我正在使用 AngularJS v1.2.25.

<!-- CODE BEGIN -->
<!DOCTYPE html>
<html>
    <head>
        <script data-require="angular.js@2.0.0" data-semver="2.0.0" src="https://code.angularjs.org/2.0.0-beta.6/angular2.min.js"></script>
        <link rel="stylesheet" href="style.css" />
        <script src="script.js"></script>
    </head>
    <body>
        <select>
            <option value="volvo">Volvo</option>
            <option value="saab">Saab</option>
            <option value="opel">Opel</option>
            <option value="audi">Audi</option>
        </select>
        <select>
            <option value="volvo">Volvo</option>
            <option value="saab">Saab</option>
            <option value="opel">Opel</option>
            <option value="audi">Audi</option>
        </select>
        <select>
            <option value="volvo">Volvo</option>
            <option value="saab">Saab</option>
            <option value="opel">Opel</option>
            <option value="audi">Audi</option>
        </select>
        <select>
            <option value="volvo">Volvo</option>
            <option value="saab">Saab</option>
            <option value="opel">Opel</option>
            <option value="audi">Audi</option>
        </select>
    </body>
</html>
<!-- CODE END -->

我正在制作一个 'form' 元素并且有几个 'select' 元素标签和几个 'option' 元素标签。

'option' 元素标签在所有四个 'select' 元素标签中具有相同的属性。

我希望用户对汽车制造商进行排名。当他们 select 制造商时，我想在所有四个 'select' 元素标签中禁用 'option' 元素。

我找到了下面的 question/answer，但这是 'AngularJS' 的方式吗？ (Disable option in select)

他们正在使用 jQuery，我知道 AngularJS 包含 'jQuery Lite'，但该实现是 'AngularJS' 方式吗？

我在 AngularJS 站点找到了这个文档： htt9$://docs.angularjs.org/api/ng/directive/ngDisabled

这是随附的 Plunk link： htt9$://plnkr.co/edit/?p=preview

我很欣赏 AngularJS 团队提供的示例。我正在考虑修改 ng-model and/or ng-disabled。我想避免 'hacking' AngularJS 'core' 个文件。

我是否解耦 ng-model and/or ng-disabled？

或者，我应该制作自定义过滤器吗？

我来自 jQuery 背景，我正在尝试尽可能地遵守 AngularJS 最佳实践。我想防止过度 'technical debt'.

Answer 1

禁用 select 选项的 Angular 方法是使用 ng-disabled="expression" This plunker 展示了它是如何完成的。

在你的情况下，你可以像这样有 4 个 select：

<select ng-model="model.selected1">
  <option ng-repeat="c in model.options" value="{{c.value}}" ng-disabled="model.should_disable(c, 1)">{{c.label}}</option>
</select>
<select ng-model="model.selected2">
  <option ng-repeat="c in model.options" value="{{c.value}}" ng-disabled="model.should_disable(c, 2)">{{c.label}}</option>
</select>
<select ng-model="model.selected3">
  <option ng-repeat="c in model.options" value="{{c.value}}" ng-disabled="model.should_disable(c, 3)">{{c.label}}</option>
</select>
<select ng-model="model.selected4">
  <option ng-repeat="c in model.options" value="{{c.value}}" ng-disabled="model.should_disable(c, 4)">{{c.label}}</option>
</select>

其中 model.options 是您的选项列表

var model = $scope.model = {
    options: [
      {label: 'Volvo', value: 'volvo'},
      {label: 'Audi', value: 'audi'},
      {label: 'Saab', value: 'saab'},
      {label: 'Opel', value: 'opel'},
    ],
    should_disable: should_disable
}

当汽车 c select在 <select> 而不是 num.

时，函数 should_disable(c, num) 应该为真

  function should_disable(c, selectnum){
    var other_selectnums = [1,2,3,4].filter(function(n){
      return n != selectnum;
    });
    var is_selected_somewhere_else = false;
    for(var i=0; i<other_selectnums.length; i++){
      var otherselectnum = other_selectnums[i];
      if(c.value == model['selected'+otherselectnum]){
        is_selected_somewhere_else = true;
        break;
      }
    }
    return is_selected_somewhere_else;
  }

Here's a fully working plunkr

'AngularJS' 禁用 'option' HTML5 元素的方法是什么？

What is the 'AngularJS' way to disable an 'option' HTML5 element?

javascript

angularjs

angularjs-ng-disabled