输入框之间的控制实例

程序员文章站 2022-06-12 11:50:05

...

两个输入框，任一输入框的值改变时,另一个输入框变成只读。

一.watch实现

test.html

<html ng-app='myApp'>
<head>
	<title>Watch实例</title>
</head>
<body ng-controller='Controller'>
	<h1>Watch实例</h1>
	<input ng-model='model.aVal' ng-disabled="ctrl.aStatus">
	<input ng-model='model.bVal' ng-disabled="ctrl.bStatus">
	
	<script src="lib/angular/angular.js"></script>
	<script>
		var myApp=angular.module('myApp',[])
		myApp.controller('Controller', function($scope) {
			$scope.model = {
				aVal: 'zhangshan',
				bVal: 'lisi'
			};
			$scope.model2 = {};
			$scope.ctrl = {aStatus: false, bStatus: false};
			
			angular.copy($scope.model, $scope.model2);
			
			$scope.bVal = function() {
				return $scope.model.bVal;
			};
			
			$scope.$watch($scope.bVal, function(newValue, oldValue, scope) {
				if(!newValue) return;
				if(newValue != $scope.model2.bVal) {
					scope.ctrl.aStatus = true;
				}else {
					scope.ctrl.aStatus = false;
				}
			});
			
			$scope.aVal = function() {
				return $scope.model.aVal;
			};
			
			$scope.$watch($scope.aVal, function(newValue, oldValue, scope) {
				if(!newValue) return;
				if(newValue != $scope.model2.aVal) {
					scope.ctrl.bStatus = true;
				}else {
					scope.ctrl.bStatus = false;
				}
			});
		});
	</script>
</body>
</html>

运行效果：

输入框之间的控制实例

博客分类： AngularJS watchng-change

二.watch实现，js与html分开

test02.html

<html>
<head>
	<title>Watch实例</title>
</head>
<body ng-controller='Controller'>
	<h1>Watch实例</h1>
	<input ng-model='model.aVal' ng-disabled="ctrl.aStatus">
	<input ng-model='model.bVal' ng-disabled="ctrl.bStatus">
	
	<script src="lib/angular/angular.js"></script>
	<script src="app02.js"></script>
</body>
</html>

app02.js

var myApp=angular.module('myModule', []);

myApp.controller('Controller',function($scope){
	$scope.model = {
		aVal: 'zhangshan',
		bVal: 'lisi'
	};
	$scope.model2 = {};
	$scope.ctrl = {aStatus: false, bStatus: false};
	
	angular.copy($scope.model, $scope.model2);
	
	$scope.bVal = function() {
		return $scope.model.bVal;
	};
	
	$scope.$watch($scope.bVal, function(newValue, oldValue, scope) {
		if(!newValue) return;
		if(newValue != $scope.model2.bVal) {
			scope.ctrl.aStatus = true;
		}else {
			scope.ctrl.aStatus = false;
		}
	});
	
	$scope.aVal = function() {
		return $scope.model.aVal;
	};
	
	$scope.$watch($scope.aVal, function(newValue, oldValue, scope) {
		if(!newValue) return;
		if(newValue != $scope.model2.aVal) {
			scope.ctrl.bStatus = true;
		}else {
			scope.ctrl.bStatus = false;
		}
	});
});
angular.element(document).ready(function() {   
 angular.bootstrap(document,['myModule']);  
});

三.峰回路转，控制ng-disabled对应的模型即可，SO EASY
test03.html

<html>
<head>
	<title>输入框之间的控制</title>
</head>
<body ng-controller='Controller'>
	<h1>输入框之间的控制实例</h1>
	
	<input ng-model='model.aVal' ng-disabled="model.bVal != model2.bVal">
	<input ng-model='model.bVal' ng-disabled="model.aVal != model2.aVal">
	
	<script src="lib/angular/angular.js"></script>
	<script src="app03.js"></script>
</body>
</html>

app03.js

var myApp=angular.module('myModule', []);

myApp.controller('Controller',function($scope){
	$scope.model = {
		aVal: 'zhangshan',
		bVal: 'lisi'
	};
	$scope.model2 = {};
	$scope.ctrl = {aStatus: false, bStatus: false};
	
	angular.copy($scope.model, $scope.model2);
});
angular.element(document).ready(function() {   
 angular.bootstrap(document,['myModule']);  
});