什么是AngularJS的方式来显示或隐藏表单元素？

这个问题在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的值.如果您希望,可以通过控制器中的值的复杂计算来增强这一点.

什么是AngularJS的方式来显示或隐藏表单元素？

相关文章