angularJS disabled用法实例

最新推荐文章于 2023-08-16 15:14:05 发布
最新推荐文章于 2023-08-16 15:14:05 发布
阅读量535 收藏
点赞数
分类专栏： AngularJS 文章标签： javaScript anuglar ViewUI

angularJS disabled用法实例

angularJS此实例的覆盖知识点有：

1.ng-repeat的用法

2.filter的用法

3.页面显示时code转名称

4.ng-disabled在实例中的应用

5.angular.copy的应用

 

index2.html

<!doctype html>
<html ng-app>
    <head>
        <script src="lib/angular-1.0.1.js" type="text/javascript"></script>
        <script src="js/script2.js"></script>
    </head>
    <body>
        <table style="width:80%" border="1" align="center" data-ng-controller="Ctrl">
			<tr>
				<td style="width:5%">选择</td>
				<td style="width:5%">代码</td>
				<td style="width:10%">名称</td>
				<td style="width:75%">描述</td>
				<td style="width:5%">结果</td>
			</tr>
			<tr data-ng-repeat="test in list | filter:{code: 'TEST001'}">
				<td><input type="checkbox" data-ng-model="test.isSelected" /></td>
				<td data-ng-bind='test.code'></td>
				<td data-ng-bind='test.name'></td>
				<td>ABC&nbsp;&nbsp;属于<textarea rows="1" style="width:80%" data-ng-model="test.desc" data-ng-disabled="!test.isSelected"></textarea></td>
				<td data-ng-bind='handler.getStatus(test.result)'></td>
			</tr>
			<tr data-ng-repeat="test in list | filter:{code: 'TEST002'}">
				<td><input type="checkbox" data-ng-model="test.isSelected" /></td>
				<td data-ng-bind='test.code'></td>
				<td data-ng-bind='test.name'></td>
				<td>CDE&nbsp;&nbsp;属于<textarea rows="1" style="width:80%" data-ng-model="test.desc" data-ng-disabled="!test.isSelected"></textarea></td>
				<td data-ng-bind='handler.getStatus(test.result)'></td>
			</tr>
			<tr data-ng-repeat="test in list | filter:{code: 'TEST003'}">
				<td><input type="checkbox" data-ng-model="test.isSelected" /></td>
				<td data-ng-bind='test.code'></td>
				<td data-ng-bind='test.name'></td>
				<td>
					<table style="width:100%">
						<tr>
							<td style="width:20%">XYZ&nbsp;&nbsp;属于</td>
							<td style="width:80%"><span data-ng-repeat="one in oneList"><input type="checkbox" data-ng-model="one.isChecked" data-ng-disabled="!test.isSelected"/>{{one.name}}</span></td>
						</tr>
					</table>
				</td>
				<td data-ng-bind='handler.getStatus(test.ruleResult)'></td>
			</tr>
		</table>
    </body>
</html>

script2.js

function Ctrl($scope) {
	
	$scope.list = [];
	
	var one1 = {
		isChecked : false,
		code : '01',
		name : '选项1'
	};
	var one2 = {
		isChecked : true,
		code : '02',
		name : '选项2'
	};
	var one3 = {
		isChecked : false,
		code : '03',
		name : '选择3'
	};
	var one4 = {
		isChecked : true,
		code : '04',
		name : '选择4'
	};
	$scope.oneList = [];
	$scope.oneList.push(one1);
	$scope.oneList.push(one2);
	$scope.oneList.push(one3);
	$scope.oneList.push(one4);
	
	$scope.handler = {
		init : function() {
			var test1 = {
				isSelected : true,
				code: 'TEST001',
				name: '测试001',
				desc: '测试专用',
				result: '0'
			};
			var test2 = angular.copy(test1);
			test2.code = 'TEST002';
			test2.name = '测试002';
			test2.desc = '测试暂用';
			test2.result = '1';
			
			var test3 = angular.copy(test1);
			test3.code = 'TEST003';
			test3.name = '测试003';
			test3.desc = '测试暂用';
			test3.result = '1';
			
			$scope.list.push(test1);
			$scope.list.push(test2);
			$scope.list.push(test3);
		},
		getStatus : function(val) {
			return val === '0' ? '不通过' : '通过';
		}
	};
	
	$scope.handler.init();
}

运行效果：

      勾选掉前面的勾选框，后面的描述变为disabled，当然，再勾上前面的勾选框，后面的描述变为非disabled。

wjxbj
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
jQuery中:disabled选择器用法实例
10-24
主要介绍了jQuery中:disabled选择器用法,实例分析了:disabled选择器功能、定义及选取所有禁用的表单元素的技巧,需要的朋友可以参考下
解决angualr13 form表单设置disabled不起作用问题
最新发布
富朝阳的博客
03-22 535
通过 config.get('name') 来获取通过 formControlName 绑定的表单控件，并使用 enable() 和 disable() 方法来切换其禁用状态。当点击 “Toggle Disabled” 按钮时，isDisabled 属性会切换其值以实现禁用和启用控件的效果。formControlName 是 Angular 中的一个指令，用于绑定表单控件，并自动处理表单控件的状态和值。当使用 formControlName 绑定一个表单控件时，它将负责控制该控件的禁用状态。
ng-zorro+angular中 input输入框设置disabled属性无效的解决方法
Dominic_W的博客
04-20 5495
错误描述 ng-zorro是遵循Ant Design设计规范的Angular UI组件库，前端开发中angular + ng-zorro结合使用可以事半功倍。 今天在开发过程中发现ng-zorro的一个坑，当我给input输入框设置disabled属性时，无论disabled的值为true或者false都没有效果。 经过多番调查发现，在ng-zorro中使用disabled属性时，disabled属性时灵时不灵，具体有以下几种情况： 1、disabled属性与ngModel同时使用时，disabled效果正
angular中input标签中的disabled不生效
weixin_45678402的博客
08-16 568
input动态设置disabled，不生效
angularjs 的ng-disabled属性操作
weixin_30284355的博客
10-27 391
ng-readonly:不可用，但是可以提交数据 ng-disabled: 属性是控制标签是否可用（不可用且无法传值） 表达式控制： <input class="col-md-2 form-control" type="text" ng-model="formData.MovingCode" id="MovingCode" ng-readonly="MovingCodeReadO...
Angular 基础
GoldenaArcher的博客
03-06 258
一些基础知识，包括创建组件、组件的一些属性，数据绑定，和 Directives。
AngularJS基础 ng-disabled 指令详解及简单示例
10-21
本文主要介绍AngularJS ng-disabled 指令,这里帮大家整理了ng-disabled指令的基础指令,并附示例代码,有需要的小伙伴参考下
AngularJS 入门教程之HTML DOM实例详解
01-19
AngularJS HTML DOM AngularJS 为 HTML DOM 元素的属性...AngularJS 实例 <!DOCTYPE html> <html> <head> <meta charset=utf-8> [removed][removed] </head> <body> <div ng-app
Angular7设置Input的disabled属性
henreash的专栏
03-31 1万+
在html页面中直接按低版本的方式配置[attr.disabled]="true"，不生效，而且运行时按F12可以看到如下警告： It looks like you're using the disabled attribute with a reactive form directive. If you set disabled to true when you set up this con...
使用AngularJS中的SCE来防止XSS攻击的方法
10-24
主要介绍了使用AngularJS中的SCE来防止XSS攻击的方法,依靠合理地转码为HTML来预防跨站脚本漏洞共计,需要的朋友可以参考下
AngularJS使用 ng-disabled 属性与ng-model搭配，实现禁用button效果
热门推荐
一生为追梦的博客
09-18 3万+
在输入框内无文字时，提交button是不能点击状态，在输入文字后会变为可点击状态 实现方法： <button class="btn btn-sm btn-block btn-primary" ng-disabled="!shyj" ng-click="agreeClick();" ng-tap="$navigate.go('/home')">
AngularJS之ng-disabled指令
牛栏山矿泉水
11-06 342
1、问题背景 AngularJS中的ng-disabled指令绑定DOM，可以禁用HTML元素 2、实现源码 &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;AngularJS之ng-disabled指令&lt;/title&gt; &amp
angularJS1 ng-disabled控制元素是否禁用
xiejunna的博客
12-22 1万+
1.适用范围：<input>, <select>, <textarea>,<button> 2.ng-disabled=’表达式’；表达式的结果为true时，元素将禁用；为false时，将解除禁用。 3.demo如下：<!doctype html> <html> <head> <meta charset="utf-8"> <title>form demo<
angularJs中ng-readonly和ng-disabled的区别
泠泠似水
05-28 3552
**ng-readonly:不能修改，但是可以提交数据 ng-disabled:不能修改，也不可以提交数据**<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <script src="angular.min.js"></script> </head> <body> <style> input[re
AngularJS a标签实现disabled的功能
xiaomei1xiake2的博客
09-10 3764
当&lt;a&gt;标签的ng-disabled属性设置成true,只是颜色变灰色但是还能提交。网上有一些解决方案: 方法一： 定义一个方法，删除href属性。 方法二：运用ng-click 但是这些方法都需要在js文件中定义方法，不能只是更改html文件。 解决办法： 运用条件表达式判断ng-disabled的值，如果为true，则赋空值给ng-href；如果为false，则赋相应...
AngularJS ng-disabled在a内无效
weixin_34192816的博客
12-21 377
　　在AngularJS中，对a添加ng-disabled，在disabled情况下，虽显示了不可用的样式，但点击了依旧能触发绑定在a上的ng-click事件。 　　解决方式：将a改为button。 转载于:https://www.cnblogs.com/phoenix-smile/p/5062568.html...
【Angularjs】ng-disabled
天涯~的博客
11-25 902
定义和用法 ng-disabled 指令设置表单输入字段的 disabled 属性(input, select, 或 textarea)。 如果 ng-disabled 中的表达式返回 true 则表单字段将被禁用。 语法 &lt;input ng-disabled="expression"&gt;&lt;/input&gt; &lt;input&gt;, &lt;select&gt;,...
angularjs怎样将input框的disabled与值绑定
06-02
在AngularJS中，可以使用ng-disabled指令将input框的disabled属性与作用域中的变量绑定起来，实现动态控制input框的disabled状态。 例如，如果想要将一个按钮的disabled状态与一个作用域中的变量isDisabled绑定起来...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值