disabled 为 true 时更改背景颜色

Question

如何在禁用时更改输入字段的背景颜色是true.How使用ng-class禁用输入字段。

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

//Controller

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

Answer 1

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

一起使用

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

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

Answer 2

您不需要 ng-class 而您可以使用 ng-style:

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

Answer 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 选择器实现相同的目标（见下面的代码片段）。这需要更少的代码，并且可以更简单的方式应用于所有 input。

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>

disabled 为 true 时更改背景颜色

Change the background color when disabled is true

html

css

angularjs

ng-class