禁用时更改背景颜色为真答案

【问题标题】：Change the background color when disabled is true禁用时更改背景颜色为真
【发布时间】：2018-08-24 18:14:39
【问题描述】：

禁用时如何更改输入字段的背景颜色为真。如何将ng-class用于禁用的输入字段。

//html
<div>
<input type="file" ng-disabled="false" id="id1">
</div>

//Controller

document.getElementById("id1").disabled = true;

【问题讨论】：

标签： html css angularjs ng-class

【解决方案1】：

只需为 ng-disabled 设置范围变量并将其与 ng-class 一起使用

<input type="file" ng-disabled="shouldDisable" ng-class="{'disabledCssClassName' : shouldDisable}" id="id1">

然后在控制器中通过设置 shouldDisable = true/false 来管理控制器的禁用状态并在样式表中定义 css 类

【讨论】：

这可行，但我认为它过于复杂。难道你不能使用 css 选择器而不是使用 angular 来完成同样的事情吗？ developer.mozilla.org/en-US/docs/Web/CSS/:disabled 编辑：使用范围变量来确定输入是否被禁用是更好的方法。我的评论只是在谈论问题的样式部分。

【解决方案2】：

你不需要 ng-class 而你可以使用 ng-style：

 <input type="file" ng-disabled="false" id="id1" ng-style="{'background-color': disabled? 'red' : 'green'}"

【讨论】：

但是您将演示风格混合到您的内容/模型中，因此如果您想在明年重新设计您的网站/应用程序，您将不得不通过每个文件。最好在.css 文件中使用外部样式。

【解决方案3】：

这是一个使用ng-class的示例

angular
  .module('app', [])
  .controller('ctrl', function($scope) {
    $scope.disabled = true;
  });

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<style>
  .ng-disabled {
    background: #E9B96E;
  }
</style>

<span ng-app="app" ng-controller="ctrl">
Disabled? <input type="checkbox" ng-model="disabled"/>
<br/>

<!-- sets `ng-disabled` as class when `disabled` var is true! -->
<input ng-class="{'ng-disabled': disabled}" ng-disabled="disabled" ng-value="disabled? 'Disabled': 'Enabled'"/>

</span>

在这里您可以看到如何使用 CSS :disabled 选择器来实现相同的目标（参见下面的 sn-p）。这需要更少的代码，并且可以以更简单的方式应用于所有inputs。

angular
  .module('app', [])
  .controller('ctrl', function($scope) {
    $scope.disabled = true;
  });

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<style>
  input:disabled {
    background: #E9B96E;
  }
</style>

<span ng-app="app" ng-controller="ctrl">
Disabled? <input type="checkbox" ng-model="disabled"/>
<br/>

<input ng-disabled="disabled" ng-value="disabled? 'Disabled': 'Enabled'"/>

</span>

【讨论】：