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

在Tami Wright的邮件列表上询问此问题...什么是AngularJS显示或隐藏表单元素的方式？

我正在从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; 
      });

谢谢你在前进，

塔米·赖特

来源

2012-11-08 Pete BD

一个主要的设计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>

你可以看到，而不是编写必要的代码，我们可以声明类和输入的只读属性绑定到的值选择。如果您愿意，可以通过对控制器中的值进行复杂的计算来增强此功能。

来源

2012-11-08 11:24:55

+1。感谢您回答SO问题的努力。 – SunnyShah

我还建议在角度记录中使用ng-hide或ng-show作为状态 https://docs.angularjs.org/api/ng/directive/ng隐藏 – Skary

我喜欢你的例子和解释。你不觉得我们又回到了一种现代的“突兀的javascript”吗？ –

从AngularJS官方文档上directives：

指令是教HTML新花样的方式。在DOM编译期间，指令会与HTML进行匹配并执行。这允许指令注册行为或转换DOM。

Angular带有一组内置的指令，这些指令可用于构建Web应用程序，但可以扩展为使HTML可以变为声明性域特定语言（DSL）。

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

AngularJS对所有这些都有很好的示例。

来源

2013-01-13 21:37:28 Guy

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

回答

相关问题