Tami Wright在邮件列表中询问了这个问题......
我正在从JQuery进入AngularJS世界,我不太确定如何翻译一个在JQuery中毫不费力的特定用例.该用例是基于相同形式的选择元素的改变来启用/禁用或隐藏/显示表单元素.任何想要分享的想法/建议/指示可以帮助我实现这个目标吗？
关于我在这里尝试做什么的想法是一些代码来说明:
$('#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;
});
先感谢您,
塔米赖特
Pet*_* BD 19
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>
您可以看到,我们可以声明输入的类和readonly属性绑定到select的值,而不是编写命令式代码.如果您愿意,可以通过控制器中值的复杂计算来增强这一点.
| 归档时间： |
|
| 查看次数： |
17242 次 |
| 最近记录： |