10

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

先感谢您，

塔米赖特

4

2 回答 2

19

AngularJS 的主要设计目标之一是允许应用程序开发人员构建 Web 应用程序，而无需或很少直接操作 DOM。在许多情况下，这也导致了更具声明性的编程风格。这使得业务逻辑可以很容易地进行单元测试，并大大提高了您开发应用程序的速度。

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

于 2012-11-08T11:24:55.330 回答
4

来自关于指令的 AngularJS 官方文档：

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

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

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

AngularJS 为所有这些提供了很好的示例。

于 2013-01-13T21:37:28.883 回答