AngularJs 中,有一个输入的界面,需要先单选一个按钮,然后旁边的下拉框根据他选中的值,如果是是,就可以点击,如果是否,就不可以点击,主要是使用到ng-change的按钮改变监听函数,还有ng-disabled属性,设置是否可以点击,如下例子:
<!DOCTYPE html><html><meta charset="utf-8"><script src="https://cdn./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时间:-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() {//监听输入框,使用watchalert("监听值变化"+(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学习之旅开始了!!!
如果觉得《AngularJs 监听单选按钮 禁止级联的下拉框编辑》对你有帮助,请点赞、收藏,并留下你的观点哦!