gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-12-04 02:53:24 24 4
gpt4 key购买 nike

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

先感谢您,

塔米赖特

最佳答案

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>

您可以看到,我们可以声明输入的类和只读属性绑定(bind)到 select 的值,而不是编写命令式代码。如果您愿意,可以通过对 Controller 中的值进行复杂计算来增强这一点。

关于angularjs - AngularJS 显示或隐藏表单元素的方式是什么?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13288136/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com