title: AngularJS hiding input field
body: <p>I am writing a login page with register and login options using AngularJS. There are three input fields: <code>username</code>, <code>password</code> and <code>name</code>. I want <code>name</code> field to appear when I click to register button and disappear when I click to login button. Therefore I want to change input field's class to 'hidden' on click and let css handle the job. How can I do it using AngularJS? Is there a better way to hide the <code>name</code> input field? </p>
  
  <h3>HTML:</h3>
  
  <pre><code>&lt;h2&gt;Welcome to Mail Service&lt;/h2&gt;
  
  &lt;form action="/action_page.php"&gt;
    &lt;div class="imgcontainer"&gt;
      &lt;img src="images/img_avatar2.png" alt="Avatar" class="avatar"&gt;
    &lt;/div&gt;
  
    &lt;div class="container"&gt;
      &lt;label&gt;&lt;b&gt;Username&lt;/b&gt;&lt;/label&gt;&lt;br&gt;
      &lt;input type="text" placeholder="Enter Username" name="uname" required ng-model="user.username"&gt;&lt;br&gt;
      &lt;label&gt;&lt;b&gt;Password&lt;/b&gt;&lt;/label&gt;&lt;br&gt;
      &lt;input type="password" placeholder="Enter Password" name="psw" required ng-model="user.password"&gt;&lt;br&gt;
  
      &lt;!-- NAME INPUT FIELD --&gt;
      &lt;div class="textField-hidden"&gt;
          &lt;label&gt;&lt;b&gt;Name&lt;/b&gt;&lt;/label&gt;&lt;br&gt;
          &lt;input type="text" placeholder="Enter Name" ng-model="user.name"&gt;
      &lt;/div&gt;&lt;br&gt;
  
      &lt;button type="submit" ng-click="login()"&gt;Login&lt;/button&gt;&lt;br&gt;
      &lt;button type="submit" ng-click="register()"&gt;Register&lt;/button&gt;
    &lt;/div&gt;
  
  &lt;/form&gt;
  </code></pre>
  
  <h3>AngularJS Controller:</h3>
  
  <pre><code>app.controller('LoginCtrl', ['$scope', '$resource', '$location',  
      function($scope, $resource, $location)
      {
          $scope.login = function()
          {
              var loginRequest = $resource('/api/login');
  
              loginRequest.save($scope.user, function(response)
              {
              });
          };
  
          $scope.register = function()
          {
              var registerRequest = $resource('/api/register');
  
              loginRequest.save($scope.user, function(response)
              {
              });
          };
      }]);
  </code></pre>