Question

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

我正在使用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 -->

我正在制作一个＆＃39;表格＆＃39;元素，有几个选择＆＃39;元素标签有几个选项＆＃39;元素标签。

＆＃39;选项＆＃39;元素标签在所有四个“选择”中具有相同的属性。元素标签。

我希望用户对汽车制造商进行排名。当他们选择制造商时，我想禁用该选项＆＃39;四个元素中的元素选择＆＃39;元素标签。

我发现了以下问题/答案，但这是＆＃39; AngularJS＆＃39;办法？（Disable option in select）

他们正在使用jQuery，我知道AngularJS包含＆＃39; jQuery Lite＆＃39;，但是这个实现是＆＃39; AngularJS＆＃39;方式是什么？

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

这是附带的Plunk链接： htt9 $：//plnkr.co/edit/ P =预览

我很欣赏AngularJS团队提供的示例。我正在考虑修改ng-model和/或ng-disabled。我想避免＆＃39; hacking＆＃39; AngularJS＆＃39;核心＆＃39;文件。

我是否要解耦模型和/或禁用ng？

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

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

Answer 1

禁用选择选项的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>以外的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; }中选择car c时，该函数should_disable（c，num）应该为真。

<?php $greeting = __( 'Hello There!', 'text-domain' ); ?>

Here's a fully working plunkr

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

1 个答案: