AngularJS 实现当元素为ng-disabled改变背景颜色

发布时间：2020-12-17 09:24:43 所属栏目：安全来源：网络整理

导读：如题，AngularJS可以给元素设置disabled属性，当为true时，为不可点击，但实际运行时，不能点击，并没有明显的区别，会产生误解，所以需要元素为不可点击时候，就要设置区分的背景颜色，主要是使用ng-class属性，可以根据是否是disabled来决定加载哪个class

如题，AngularJS可以给元素设置disabled属性，当为true时，为不可点击，但实际运行时，不能点击，并没有明显的区别，会产生误解，所以需要元素为不可点击时候，就要设置区分的背景颜色，主要是使用ng-class属性，可以根据是否是disabled来决定加载哪个class样式，参考网址：http://www.cnblogs.com/whitewolf/archive/2013/05/22/3092184.html，还有这个网址：https://www.oschina.net/question/1053626_241643，如下是我的测试的代码：

<!DOCTYPE html>
<html>
	<meta charset="utf-8">
	<script src="https://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
    <head>
    <style>
.sky {
    color:white;
    background-color:lightblue;
}
.tomato {
    background-color:coral;
}
</style>
    </head>
	<body>
		<div ng-app="myApp" ng-controller="namesCtrl">
			<div class="item">
				<label class="list_tit">是否男女</label>
				<div class="item_input">
					<label class="perq" for="amrys_y"><input ng-model="amrys" ng-change="changeArmyType(amrys)" id="amrys_y" name="amrys" type="radio" value="true" />是</label>
					<label class="perq" for="amrys_n"><input ng-model="amrys"  ng-change="changeArmyType(amrys)" id="amrys_n" name="amrys" type="radio" ng-checked="true" value="false" />否</label>
				</div>
			</div>
			<div class="item">
				<label class="list_tit">技能</label>
				<div class="item_input">
					<select ng-model="armyType" ng-disabled="armyTypeBool">
						<option value="">请选择</option>
						<option value="1">打仗</option>
						<option value="2">搬东西</option>
					</select>
				</div>
			</div>
			
			<!--
            	作者：qiulinhe
            	时间：2017-03-31
            	描述：监听下拉框，然后控制级联的编辑框不可以编辑
            -->
			<div class="item">
					<label class="list_tit">政治面貌</label>
					<div class="item_input">
						<select ng-model="zzmmType" ng-init="zzmmType=2" ng-change="changeZzmmType(zzmmType)">
							<option value="" >请选择</option>
							<option value="2"  >群众</option>
							<option value="1" ng-selected="true">党员</option>
						</select>
					</div>
				</div>
				<div class="item">
					<label >入党时间</label>
					<div >
						<input  class="rudang"  id="joinParty" ng-disabled="joinBool"  ng-class="{true: 'sky',false: 'tomato'}[joinBool]" ng-model="joinParty" placeholder="请输入入党时间" />
					</div>
				</div>

		</div>

		<script>
			var app = angular.module('myApp',[]);
			app.controller('namesCtrl',function($scope,$location,$http,$timeout) {
				$scope.armyTypeBool = true;
				//只有是否男女选中了是，才能选男女类型
				$scope.changeArmyType = function(x) {
					x == 'true' ? x = false : x = true;
					$scope.armyTypeBool = x;
				}
				
				$scope.joinBool=false;
				$scope.changeZzmmType = function(type) {
					$scope.joinBool=type==1?false:true;
				}
				
				
			});
		</script>

	</body>

</html>

运行结果为：

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!