0

禁用“选项”HTML5元素的“AngularJS”方法是什么？

我正在使用 AngularJS v1.2.25。

Plunk 链接： https ://plnkr.co/edit/fS1uKZ

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

我正在制作一个“表单”元素，并且有几个“选择”元素标签和几个“选项”元素标签。

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

我希望用户对汽车制造商进行排名。当他们选择制造商时，我想在所有四个“选择”元素标签中禁用该“选项”元素。

我找到了以下问题/答案，但这是“AngularJS”的方式吗？（在选择中禁用选项）

他们正在使用 jQuery，我知道 AngularJS 包含“jQuery Lite”，但这种实现方式是“AngularJS”吗？

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

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

我可以欣赏 AngularJS 团队提供的示例。我正在考虑修改 ng-model 和/或 ng-disabled。我想避免“破解”AngularJS“核心”文件。

我是否解耦 ng-model 和/或 ng-disabled？

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

我来自 jQuery 背景，我正在尝试尽可能地遵循 AngularJS 最佳实践。我想防止过度的“技术债务”。

4

1 回答 1

0

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

在您的情况下，您可以有 4 个选择，如下所示：

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

<select>当在除 num 之外的 a 中选择汽车 c 时，该函数 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;
  }

这是一个完全正常工作的 plunkr

于 2016-07-02T02:47:46.783 回答