AngularJs 中,有一个输入的界面,需要先单选一个按钮,然后旁边的下拉框根据他选中的值,如果是是,就可以点击,如果是否,就不可以点击,主要是使用到ng-change的按钮改变监听函数,还有ng-disabled属性,设置是否可以点击,如下例子:
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<script src="https://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
<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" ng-selected="true">群众</option>
<option value="1">党员</option>
</select>
</div>
</div>
<div class="item">
<label >入党时间</label>
<div >
<input type="text" id="joinParty" ng-disabled="zzmmType==2" ng-model="joinParty" placeholder="请输入入党时间" οnkeyup="setTime(this.id);"/>
</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;
}
});
</script>
</body>
</html>
还有上述利用监听下拉框的选中的值,控制旁边的编辑框的是否可以编辑。
2.输入界面上监听输入框如果没有输入数据的话,控制另一个级联的不可以输入,在输入框input没有输入之前或者输入之后取消为空''也要进行判断,取到的值为undefined或者''的,使用typeof进行判断,如下代码:
$scope.$watch('constJob', function() {//监听输入框,使用watch
alert("监听值变化"+(typeof($scope.constJob)=="undefined"));
$scope.constTimeBool= $scope.constJob==null||$scope.constJob==''?true:false;
});
<div class="item">
<label class="list_tit">我有没有靠山</label>
<div class="item_input">
<input class="inp_txt" type="text" ng-model="constJob" placeholder="请输入任命批文" />
</div>
</div>
<div class="item">
<label class="list_tit">靠山是谁</label>
<div class="item_input">
<input class="inp_txt dateTime" ng-disabled="constTimeBool" type="text" id="constTime" ng-model="constTime" placeholder="请输入任命时间" οnkeyup="setTime(this.id);" />
</div>
</div>
angularjs学习之旅开始了!!!