如题,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>
运行结果为: