AngularJS'禁用'选项'HTML5元素

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

本文关键字：元素 HTML5 禁用 AngularJS 选项      更新时间：2023-09-26

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

我使用的是AngularJS v1.2.25.

恰好链接: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 -->

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

'option'元素标签与'select'元素标签具有相同的属性。

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

我发现了下面的问题/答案，但这是'AngularJS'的方式吗?(禁用选择选项)

他们正在使用jQuery，我知道AngularJS包含'jQuery Lite'，但这是实现'AngularJS'的方式?

我在AngularJS网站上找到了这个文档:htt9美元://docs.angularjs.org/api/ng/directive/ngDisabled

这是随附的Plunk链接:htt9美元://plnkr.co/编辑/?p =

预览我很欣赏AngularJS团队提供的例子。我在考虑修改ng-model和/或ng-disabled。我想避免'黑客' AngularJS的'核心'文件。

我解耦ng-model和/或ng-disabled吗?

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

我来自jQuery的背景，我试图坚持AngularJS的最佳实践尽可能多。我想防止过多的"技术债务"。

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

在这种情况下，你可以有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>

模型。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
}

函数should_disable(c, num)应该是true，当car c在一个<select>中被选中，而不是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;
  }

这是一个完全工作的活塞

相关文章：