您的位置：首页 > Web前端 > AngularJS

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

2017-03-31 09:41 337 查看

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="请输入入党时间"  onkeyup="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="请输入任命时间" onkeyup="setTime(this.id);" />
</div>
</div>

angularjs学习之旅开始了！！！

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： angularjs ng-disabled

相关文章推荐

新的分享

章节导航