CODEWITHSUNDEEP
angularjs
Pete BD
Pete BD

Reputation: 10161

What is the AngularJS way to show or hide a form element?

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

Upvotes: 10

Views: 17635

Answers (2)

Guy
Guy

Reputation: 598

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 .

Upvotes: 4

Pete BD
Pete BD

Reputation: 10161

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.

Upvotes: 19

Related Questions