Question

禁用时如何更改输入字段的背景颜色。如何将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类

Answer 2

您可以使用ng-style时不需要ng-class：

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

禁用时更改背景颜色

3 个答案: