AngularJs 监听单选按钮，禁止级联的下拉框编辑

最新推荐文章于 2020-12-18 21:14:59 发布

置顶清澈@Cherry

最新推荐文章于 2020-12-18 21:14:59 发布

阅读量2.2k

点赞数

分类专栏：前端 AngularJs 文章标签： angularjs ng-disabled

本文链接：https://blog.csdn.net/nihaoqiulinhe/article/details/68921719

版权

前端同时被 2 个专栏收录

37 篇文章 0 订阅

订阅专栏

AngularJs

4 篇文章 0 订阅

订阅专栏

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学习之旅开始了！！！