Menu
This question was asked on the Mailing List by Tami Wright...
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?
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;
});
Thank you in advance,
Tami Wright
977
ng-hide Directive: The ng-hide Directive in AngluarJS is used to show or hide the specified HTML element. If the expression given in the ng-hide attribute is true than the HTML elements hide. ng-hide is also a predefined CSS class in AngularJS, and sets the element's display to none.
The DOM representation of the hidden attribute is a property also called hidden , which if set to true hides the element and false shows the element. Angular doesn't manipulate HTML attributes, it manipulates DOM properties because the DOM is what actually gets displayed.
The ng-cloak directive prevents the document from showing unfinished AngularJS code while AngularJS is being loaded. AngularJS applications can make HTML documents flicker when the application is being loaded, showing the AngularJS code for a second, before all code are executed.
We can easily add or remove these CSS attributes to an HTML element using Javascript and hide an element from the page. But that is not the same as using ngIf . With ngIf , if an element is hidden then that element does not exist at all in the page.
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.
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 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.
Here is the working demo: 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>
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.
66
From AngularJS official documentation on directives :
Directives are a way to teach HTML new tricks. During DOM compilation directives are matched against the HTML and executed. This allows directives to register behavior, or transform the DOM.
Angular comes with a built in set of directives which are useful for building web applications but can be extended such that HTML can be turned into a declarative domain specific language (DSL).
In order to enable/disable input, the easiest way in AngularJS way is to use the following ngDisabled directive. For showing/hiding elements, use the following ngShow and ngHide directives
AngularJS has nice examples for all these .
27
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
