Question

我想将类添加到特定元素，添加的类应该根据用户操作进行更改。我不能使用ng-class因此我使用ng-attr-class。请检查Plnkr sample。在这里，我想在用户选择提供的单选按钮时将div的颜色更改为红色。任何建议

<body ng-controller="MainCtrl">
<input type="radio" ng-bind = "enable"/> Enable
<div style="min-height:50px; min-width: 200px; border:1px solid black;" ng-attr-class = "{{enable && 'divEnabled' || 'divDisabled'}}"></div>

var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
  $scope.name = 'World';
});

.divEnabled{ background-color:#FF0000;}

.divDisabled{background-color:#00FF00;}

我正在使用Angular 1.2

Answer 1

您可以通过两种方式切换div背景颜色：

Plunker

使用两个单选按钮，

 <input type="radio" name="group1" value="true" ng-model = "enable"/>Enable
 <input type="radio" name="group1" value="false" ng-model = "enable"/> Disable
 <div style="min-height:50px; min-width: 200px; border:1px solid black;" ng-attr-class = "{{enable == 'true' && 'divEnabled' || 'divDisabled'}}"></div>

使用一个复选框按钮：

<input type="checkbox" ng-model = "enable"/> 
<div style="min-height:50px; min-width: 200px; border:1px solid black;" ng-attr-class = "{{enable && 'divEnabled' || 'divDisabled'}}"></div>

动态添加类属性，添加的类应根据用户操作进行更改

1 个答案: