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 属于<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 属于<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 属于</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。
相关推荐
**AngularJS 表单校验实例** AngularJS 是一个强大的前端JavaScript框架，它提供了一种高效的方式来构建动态、数据驱动的Web应用。在AngularJS中，表单验证是确保用户输入数据有效性和完整性的关键机制。这篇博文将...
具体到代码实例，以下是一个基本的AngularJS应用，它展示了如何结合Bootstrap来构建一个简单的用户列表界面。这个例子包含了几个基本知识点： - `ng-app`指令用于标识AngularJS应用的根元素。 - `ng-controller`...
├最新AngularJS开发宝典—第019讲 g-selected、ng-disabled、ng-readonly实例讲解.mp4 ├最新AngularJS开发宝典—第020讲 超简单实现表单的全选与反选.mp4 ├最新AngularJS开发宝典—第021讲 ng-model-options设置...
从提供的示例中我们可以看到`ng-disabled`的用法。示例代码演示了如何通过一个复选框（checkbox）来控制其他表单元素的禁用状态： ```html <!DOCTYPEhtml> ***"> 点击这里禁用所有表单输入域: ...
在本文中，我们将深入探讨如何在AngularJS应用中实现按需查询的功能，特别是在课程信息管理界面的场景下。这个需求涉及到动态地展示或隐藏课程性质的选择，基于用户选择的课程类型。下面，我们将分析给定的代码片段...
AngularJS 实例 点我! 按钮 {{ mySwitch }} 实例讲解： ng-disabled 指令绑定应用程序数据 “mySwitch” 到 HTML 的 disabled 属性。 ng-model 指令绑定 “mySwitch” 到 HTML input checkbox 元素的内容...
在AngularJS 2（现在被称为Angular）中，表单处理和依赖注入是两个核心概念，它们对于构建功能丰富的单页应用程序至关重要。让我们深入探讨这两个主题。 **AngularJS 2 表单** AngularJS 2 提供了两种类型的表单：...
以上就是AngularJS中关于HTML DOM操作的一些基本知识点，包括ng-disabled、ng-show和ng-hide等指令的介绍和应用实例。通过掌握这些指令的使用，我们可以轻松实现页面元素与应用数据状态的动态绑定，从而创造出更具...
整体而言，本书是针对***开发者对AngularJS进行入门或进阶实践的宝贵资源，通过结合实例演示的方式，帮助开发者掌握如何使用AngularJS解决实际开发中的问题，以及如何将AngularJS与***进行有效整合。
AngularJS 是一个强大的前端JavaScript框架，它提供了丰富的功能来构建交互式Web应用程序。在开发过程中，数据验证是非常关键的一环，因为我们需要确保用户输入的数据符合我们的业务规则和安全要求。AngularJS 提供...
本文将详细介绍AngularJs中延时器和计时器的使用，并给出相关的实例代码。 首先，我们来探讨AngularJs的$timeout服务。$timeout服务类似于JavaScript的setTimeout函数，用于在指定的延时之后执行某些操作。$timeout...
本文将结合实例详细介绍AngularJS在表单验证方面的功能和技巧。 首先，AngularJS提供了多种内置指令来实现表单验证，如`required`、`ng-minlength`、`ng-maxlength`、`ng-pattern`等。这些指令可以轻松地应用在HTML...
AngularJS是一个开源的JavaScript框架，由Google维护，用于构建Web应用程序的前端。它通过双向数据绑定、依赖注入、扩展HTML以及通过定义指令来拓展HTML的语法等特性，简化了动态Web应用的开发。 接下来，我们看看...
AngularJS是一个强大的前端JavaScript框架，用于构建动态Web应用程序，而Bootstrap则是一个流行的UI框架，提供了预定义的样式和组件，可以帮助开发者快速创建响应式和美观的界面。 首先，让我们看看标题和描述中...
AngularJS是谷歌开发的一套开源JavaScript框架，主要用于开发单页面应用程序（SPA）。该框架通过其独特的数据绑定和依赖注入特性，简化了网页应用的开发流程，并能够与HTML的DOM（文档对象模型）紧密集成。接下来，...
在本文中，我们将深入探讨`ng-class`指令的用法、定义、语法以及实例，帮助初学者更好地理解和应用这个功能。 ### ng-class 指令的基本概念 `ng-class`指令允许我们在AngularJS应用中根据变量的值或表达式的计算...
总结，这个AngularJS购物车代码实例展示了如何利用AngularJS的特性，如数据绑定、指令和控制器，来实现购物车商品数量的动态管理、总价计算以及商品的添加和移除。通过这种方式，我们可以创建一个响应迅速且易于维护...
在AngularJS中，每个表单元素都会关联到一个ngFormController实例，而每个输入元素（例如input, select, textarea等）都会关联到一个ngModelController实例。ngModelController不仅负责数据的双向绑定，还负责对输入...
AngularJS是Google开发的一个开源的JavaScript框架，它用于动态地更新网页内容，实现网页的单页应用（SPA）和富互联网应用（RIA）。AngularJS使用了MVW（Model-View-Whatever）的设计思想，不同于传统的MVC（Model-...