`

输入框之间的控制实例

阅读更多

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

一.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>

运行效果:





二.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']);  
});
  • 大小: 4.5 KB
  • 大小: 4.6 KB
  • 大小: 4 KB
分享到:
评论

相关推荐

    实例2_文本框_文本输入.rar_实例文本框_文本输入框

    本实例“实例2_文本框_文本输入”聚焦于如何创建和使用文本输入框,帮助开发者更好地理解和实现用户与应用之间的交互。 文本框通常由两部分组成:可视区域和输入区域。可视区域是用户看到的边框,显示了当前文本的...

    【JavaScript源代码】react+antd.3x实现ip输入框.docx

    - 在`constructor`方法中,使用`React.createRef()`创建了4个引用对象,这些引用将用于在不同输入框之间切换焦点。 2. **Ant Design(Antd)Input组件**: - Antd的`Input`组件被用来创建四个数字输入框,分别...

    Angular动态添加、删除输入框并计算值实例代码

    在Angular中,`ng-model`指令用于绑定视图和控制器之间的数据。在这个例子中,`ng-model`与数组`items`中的每个元素关联,确保每个输入框都有唯一的标识。 代码中,我们创建了一个名为`myApp`的模块,并定义了一个`...

    jQuery输入框数值加减调整插件

    `jQuery输入框数值加减调整0到100插件`正是为了解决此类问题而设计的,它允许用户通过点击按钮来增加或减少输入框中的数值,限制范围通常在0到100之间,提供了一种直观且易于操作的界面体验。 该插件基于JavaScript...

    IP地址输入控件和输入框

    `Unit1.pas`通常是一个程序的主单元,可能包含了界面设计和控件的实例化,它将`RIpedit`控件集成到实际的应用程序中,并处理相关的事件响应。 控件是用户界面(UI)设计的重要元素,它们提供了用户与软件交互的方式...

    flash as2.0基础编程实例集锦

    3. **组件-是否启用输入框TextInput和CheckBox**:这个实例关注的是用户界面元素的交互状态,如文本输入框(TextInput)和复选框(CheckBox)的启用和禁用。通过学习,你可以理解如何响应用户输入并调整组件的状态,...

    复选框点击添加或删除text输入框value值.zip

    总的来说,这个压缩包中的代码实例展示了如何利用JavaScript实现复选框与文本输入框之间的数据同步,这是前端开发中常见的交互设计。理解并掌握这种技术,有助于开发者创建更加用户友好的Web应用。在实际工作中,...

    Qt界面美工实例.rar_QT 智能 界面_Qt 项目_qt 智能家具_qt 项目实例_智能控制

    通过使用QTcpSocket或QUdpSocket类,我们可以建立客户端与服务器之间的通信,实现设备的远程控制。例如,你可以创建一个服务器端接收来自各个设备的命令,并通过TCP或UDP协议将控制指令转发到相应的家电。 此外,Qt...

    AngularJs入门学习实例

    3. **控制器**:在AngularJS中,控制器是一个JavaScript函数,负责处理视图和模型之间的交互。你可以通过ng-controller指令将控制器附加到HTML元素上。 4. **服务**:AngularJS的服务提供了一种共享代码的方式,...

    Struts1.2登录实例

    Struts1.2是一个经典的Java Web开发框架,它在2000年代中期非常流行,为构建MVC(模型-视图-控制器)架构的应用程序提供了便利。在本实例中,我们将深入探讨如何使用Struts1.2实现一个简单的登录功能,这将帮助我们...

    原创android仿QQ微信,融云输入框

    "原创android仿QQ微信,融云输入框"项目正是这样一个实例,它实现了融云SDK与微信、QQ风格的输入框功能。下面将详细阐述这个项目中的关键知识点。 首先,我们关注的是自定义View的概念。在Android中,系统提供的...

    flash课件 及一些实例

    4. **组件使用**:Flash包含许多内置组件,如按钮、文本输入框、视频播放器等,这些组件可简化交互设计,学习如何添加、配置和控制这些组件是提高效率的关键。 5. **课件制作**:在教育领域,Flash被广泛用于制作...

    带动画效果的手机号输入框 (3-4-4格式)

    本文将深入探讨如何创建一个带有动画效果的手机号输入框,该输入框采用3-4-4的格式,即手机号码分三段显示,每段数字之间通过动画过渡,增强了用户交互体验。 首先,我们需要创建一个新的布局文件来定义这个自定义...

    vue实例练习与总结

    5. **生命周期钩子**:Vue实例在创建、更新和销毁过程中有一系列的生命周期钩子函数,如`created`、`mounted`、`updated`等,开发者可以在这些钩子中插入自定义代码,控制组件在不同阶段的行为。 6. **路由管理**:...

    安卓EditText输入框相关-edittext失去焦点收起键盘.rar

    当一个Android应用中包含多个EditText时,用户在不同输入框之间切换,焦点会自动移动。可以通过设置`android:focusableInTouchMode`属性来控制是否在触摸模式下可获取焦点。 2. **监听焦点变化**: 可以使用`...

    PyQt4 精彩实例分析的26个例子

    实例4 使用标准输入框: 它展示了如何在PyQt4中创建和使用标准输入框,比如QLineEdit,用于输入单行文本。 实例5 各种消息框的使用: 该实例讲解了如何使用不同类型的消息框,包括警告、错误、信息和提示框等。 ...

    基于MVC的用户注册登录注销实例.zip

    控制器作为模型和视图之间的桥梁,接收用户的输入,调用模型进行业务处理,然后更新视图。在用户注册时,控制器接收表单数据,传递给模型进行验证,如果注册成功,会通知视图显示注册成功的消息;反之,则显示错误...

    PyQt4 精彩实例分析

    #### 实例4:使用标准输入框 标准输入框通常用于从用户那里收集简短的信息,例如用户名、密码等。 **代码示例:** ```python from PyQt4.QtGui import * app = QApplication(sys.argv) name, ok = QInputDialog....

    28个AjaxControlToolkit控件应用的实例----源码

    1. Accordion:允许用户在多个面板之间切换,只显示一个面板的内容,节省页面空间。 2. Calendar:提供一个弹出的日历控件,方便用户选择日期。 3. ConfirmButton:在按钮点击时弹出确认对话框。 4. DragPanel:支持...

Global site tag (gtag.js) - Google Analytics