Question

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;
            });

提前谢谢你，

Tami Wright

Answer 1

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的值，而不是编写命令式代码。如果您愿意，可以通过控制器中值的复杂计算来增强这一点。

Answer 2

来自AngularJS关于directives的官方文档：

指令是教授HTML新技巧的一种方式。在DOM编译期间，指令与HTML匹配并执行。这允许指令注册行为，或转换DOM。

Angular附带了一组内置指令，这些指令对于构建Web应用程序非常有用，但可以进行扩展，以便将HTML转换为声明性域特定语言（DSL）。

为了启用/禁用输入，AngularJS方式中最简单的方法是使用以下ngDisabled指令。要显示/隐藏元素，请使用以下ngShow和ngHide指令

AngularJS有很好的例子。

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

2 个答案: