这个问题在Tami Wright的邮件列表中被问到…
我正在从JQuery进入AngularJS世界,不太确定如何翻译一个特别的用例,这在JQuery中是一个不容忽视的事情.该用例是基于同一形式的select元素的更改来启用/禁用或隐藏/显示表单元素.任何人愿意分享任何想法/建议/指针,以帮助我得到这个工作？
而我想在这里做的一些想法是一些代码来说明：
$('#ddl').change( function (e) {
var selectedValue = $(this).val();
switch(selectedValue){
case 1:
// Hide/show or enable/disable form elements here with Javascript or Jquery
// Sample enable code
document.getElementById("username").readOnly = false;
document.getElementById("username").style.background = "transparent";
document.getElementById("username").style.color = "#000000";
// Sample disable code
document.getElementById("first_name").readOnly = true;
document.getElementById("first_name").style.color = "#c0c0c0";
break;
}
return false;
});
先谢谢你,
塔米·赖特
AngularJS的主要设计目标之一是允许应用程序开发人员直接操纵DOM来构建Web应用程序.在许多情况下,这也导致更多的声明式编程风格.这允许业务逻辑轻松进行单元测试,并大大提高开发应用程序的速度.
来自jQuery背景的大多数人都有一点很难摆脱DOM处理的基础,特别是使用DOM作为应用程序的域模型.
AngularJS实际上可以根据用户事件或数据变化来改变输入元素的外观.以下是上述问题如何实现的一个例子.
这是工作演示：http://plnkr.co/edit/zmMcan?p=preview
<html ng-app>
<head>
...
<style type="text/css">
.disabled {
color: #c0c0c0;
background: transparent;
}
</style>
</head>
<body ng-init="isEnabled=true">
<select ng-model="isEnabled" ng-options="choice == 'Enabled' as choice for choice in ['Enabled','Disabled']"></select><br>
User Name: <input ng-model="userName" ng-readonly="!isEnabled" ng-class="{ disabled: !isEnabled }"><br>
First Name: <input ng-model="firstName" ng-readonly="!isEnabled" ng-class="{ disabled: !isEnabled }">
</body>
您可以看到,而不是编写命令式代码,我们可以声明输入的类和只读属性被绑定到select的值.如果您希望,可以通过控制器中的值的复杂计算来增强这一点.
