什么是AngularJS的方式来显示或隐藏的表单元素？ [英] What is the AngularJS way to show or hide a form element?
问题描述
这个问题被问对塔米·赖特...
This question was asked on the Mailing List by Tami Wright...
我移动到从JQuery的的AngularJS世界，我不太清楚怎么是在JQuery中没有道理的一个特定用例翻译。该用例是启用/禁用或隐藏/显示基于选择元素在同一形式的改变表单元素。任何意见/建议/指针有谁愿意分享，以帮助我得到这个工作？
I'm moving into the AngularJS world from JQuery and am not quite sure how to translate a particular use case which is a no brainer in JQuery. That use case is enabling/disabling or hiding/showing form elements based on the change of a select element in the same form. Any ideas/suggestions/pointers anyone would be willing to share to help me get this working?
而对于什么，我想在这里做一个想法是一些code来说明：
And for an idea of what I'm trying to do here is some code to illustrate:
$('#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应用程序。在许多情况下，这也导致编程更加声明样式。这使得业务逻辑单元很容易地测试，将大大提高，你可以开发应用程序的速度。
One of the major design goals of AngularJS is to allow application developers to build web apps with little or no direct manipulation of the DOM. In many cases this also leads to a much more declarative style of programming. This allows business logic to be easily unit tested and greatly increases the rate at which you can develop applications.
大多数人从一个jQuery背景的有一点很难从使用DOM作为其应用程序的域模型围绕基础DOM操作，特别是其发展越来越远。
Most people coming from a jQuery background have a bit of a hard time getting away from basing their development around DOM manipulation and in particular using the DOM as the domain model of their application.
AngularJS实际上使得如果很容易改变基于用户的事件或数据更改输入元素的外观。下面是如何解决上述问题，可以实现一个例子。
AngularJS actually makes if very easy to change the appearance of input elements based on user events or data changes. Here is one example of how the problem above could be achieved.
下面是工作演示： http://plnkr.co/edit/zmMcan?p=$p $ PVIEW
<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>
您可以看到，而不是写势在必行code，我们可以声明类和输入只读属性必然要选择的值。这可能与如果你想一个控制器的值的复杂的计算来增强。
You can see that instead of writing imperative code, we are able to declare that the class and the readonly attributes of the input are bound to the value of the select. This could be enhanced with complex computation of the values in a controller if you wished.
这篇关于什么是AngularJS的方式来显示或隐藏的表单元素？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
