[英]change CSS based on value Angularjs
I want to change label color and cursor type based on ng-model 我想基于ng-model更改标签颜色和光标类型
index.html index.html
<button ng-click="changeType()">Change</button>
<label class="fee-type" ng-style="feeType ==='one' && {'class':'disabled-class'}" for="fixed2">Client Contengency Fee</label>
<label class="fee-type" ng-style="feeType ==='one' && {'class':'disabled-class'}" for="fixed1">Fixed Fee Per Property</label>
The default class is fee-type but when then button get clicked its class should change to disabled-class 默认类别为费用类别,但是当单击按钮时,其类别应更改为禁用类别
index.css index.css
.fee-type {
float: left;
clear: none;
display: block;
padding: 2px 1em 0 0;
color: black;
}
.disabled-class {
color:gray;
cursor: not-allowed;
}
index.js index.js
$scope.feeType= two;
$scope.changeType= function(){
$scope.feeType=one;
}
You should use ng-class
instead of ng-style
and add condition in ng-class
to apply css class in your label. 您应该使用ng-class
而不是ng-style
并在ng-class
添加条件以在标签中应用css类。
HTML: HTML:
<button ng-click="changeType()">Change</button>
<label class="fee-type" ng-class="{'disabled-class':feeType ==='one'}" for="fixed2">Client Contengency Fee</label>
<label class="fee-type" ng-class="{'disabled-class':feeType ==='two'}" for="fixed1">Fixed Fee Per Property</label>
and controller 和控制器
$scope.feeType = 'two';
$scope.changeType = function() {
$scope.feeType = 'one';
};
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.