这个问题在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的值.如果您希望,可以通过控制器中的值的复杂计算来增强这一点.
原文地址:https://www.jb51.cc/angularjs/140444.html
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。