两个输入框,任一输入框的值改变时,另一个输入框变成只读。
一.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']); });
相关推荐
本实例“实例2_文本框_文本输入”聚焦于如何创建和使用文本输入框,帮助开发者更好地理解和实现用户与应用之间的交互。 文本框通常由两部分组成:可视区域和输入区域。可视区域是用户看到的边框,显示了当前文本的...
- 在`constructor`方法中,使用`React.createRef()`创建了4个引用对象,这些引用将用于在不同输入框之间切换焦点。 2. **Ant Design(Antd)Input组件**: - Antd的`Input`组件被用来创建四个数字输入框,分别...
在Angular中,`ng-model`指令用于绑定视图和控制器之间的数据。在这个例子中,`ng-model`与数组`items`中的每个元素关联,确保每个输入框都有唯一的标识。 代码中,我们创建了一个名为`myApp`的模块,并定义了一个`...
`jQuery输入框数值加减调整0到100插件`正是为了解决此类问题而设计的,它允许用户通过点击按钮来增加或减少输入框中的数值,限制范围通常在0到100之间,提供了一种直观且易于操作的界面体验。 该插件基于JavaScript...
`Unit1.pas`通常是一个程序的主单元,可能包含了界面设计和控件的实例化,它将`RIpedit`控件集成到实际的应用程序中,并处理相关的事件响应。 控件是用户界面(UI)设计的重要元素,它们提供了用户与软件交互的方式...
3. **组件-是否启用输入框TextInput和CheckBox**:这个实例关注的是用户界面元素的交互状态,如文本输入框(TextInput)和复选框(CheckBox)的启用和禁用。通过学习,你可以理解如何响应用户输入并调整组件的状态,...
总的来说,这个压缩包中的代码实例展示了如何利用JavaScript实现复选框与文本输入框之间的数据同步,这是前端开发中常见的交互设计。理解并掌握这种技术,有助于开发者创建更加用户友好的Web应用。在实际工作中,...
通过使用QTcpSocket或QUdpSocket类,我们可以建立客户端与服务器之间的通信,实现设备的远程控制。例如,你可以创建一个服务器端接收来自各个设备的命令,并通过TCP或UDP协议将控制指令转发到相应的家电。 此外,Qt...
3. **控制器**:在AngularJS中,控制器是一个JavaScript函数,负责处理视图和模型之间的交互。你可以通过ng-controller指令将控制器附加到HTML元素上。 4. **服务**:AngularJS的服务提供了一种共享代码的方式,...
Struts1.2是一个经典的Java Web开发框架,它在2000年代中期非常流行,为构建MVC(模型-视图-控制器)架构的应用程序提供了便利。在本实例中,我们将深入探讨如何使用Struts1.2实现一个简单的登录功能,这将帮助我们...
"原创android仿QQ微信,融云输入框"项目正是这样一个实例,它实现了融云SDK与微信、QQ风格的输入框功能。下面将详细阐述这个项目中的关键知识点。 首先,我们关注的是自定义View的概念。在Android中,系统提供的...
4. **组件使用**:Flash包含许多内置组件,如按钮、文本输入框、视频播放器等,这些组件可简化交互设计,学习如何添加、配置和控制这些组件是提高效率的关键。 5. **课件制作**:在教育领域,Flash被广泛用于制作...
本文将深入探讨如何创建一个带有动画效果的手机号输入框,该输入框采用3-4-4的格式,即手机号码分三段显示,每段数字之间通过动画过渡,增强了用户交互体验。 首先,我们需要创建一个新的布局文件来定义这个自定义...
5. **生命周期钩子**:Vue实例在创建、更新和销毁过程中有一系列的生命周期钩子函数,如`created`、`mounted`、`updated`等,开发者可以在这些钩子中插入自定义代码,控制组件在不同阶段的行为。 6. **路由管理**:...
当一个Android应用中包含多个EditText时,用户在不同输入框之间切换,焦点会自动移动。可以通过设置`android:focusableInTouchMode`属性来控制是否在触摸模式下可获取焦点。 2. **监听焦点变化**: 可以使用`...
实例4 使用标准输入框: 它展示了如何在PyQt4中创建和使用标准输入框,比如QLineEdit,用于输入单行文本。 实例5 各种消息框的使用: 该实例讲解了如何使用不同类型的消息框,包括警告、错误、信息和提示框等。 ...
控制器作为模型和视图之间的桥梁,接收用户的输入,调用模型进行业务处理,然后更新视图。在用户注册时,控制器接收表单数据,传递给模型进行验证,如果注册成功,会通知视图显示注册成功的消息;反之,则显示错误...
#### 实例4:使用标准输入框 标准输入框通常用于从用户那里收集简短的信息,例如用户名、密码等。 **代码示例:** ```python from PyQt4.QtGui import * app = QApplication(sys.argv) name, ok = QInputDialog....
1. Accordion:允许用户在多个面板之间切换,只显示一个面板的内容,节省页面空间。 2. Calendar:提供一个弹出的日历控件,方便用户选择日期。 3. ConfirmButton:在按钮点击时弹出确认对话框。 4. DragPanel:支持...