Take the 2-minute tour ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.

I have a form with fields which are disabled by default. User can only view the info in it unless they press the edit button. when they click the edit button the fields will be re enable the fields with some new styles(say a green border) i want to add a class to these field which i can style in my CSS. What is the Angular way to do it?

HTML

  <form class="form-horizontal" role="form" ng-submit="edit_setting()" ng-controller="ExchangeController">
    <div class="form-group">
      <label>Name</label>
      <div class="col-sm-6">
        <input type="text" class="form-control" ng-model="name" ng-disabled="true">
      </div>
    </div>
    <div class="form-group">
      <label>Email</label>
      <div class="col-sm-6">
        <input type="email" class="form-control" ng-model="email" required ng-disabled="true">
      </div>
    </div>
    <div class="form-group">
      <div class="col-sm-offset-8 col-sm-6">
        <button type="submit" class="btn btn-success">Edit</button>
      </div>
    </div>
  </form>

Controller

  function ExchangeController($scope) {
      var details = "https://pvbp.com/api/settings.html?contactid=292351&exchange_id=7124&clearinghouseid=1&token=e5349652507c0esae86d50fdbdc53222cf97&page=view";
      $http.get(details).success(function(response){
          $scope.exchange_dt.exchange_name = response.name;
          $scope.exchange_dt.exchange_host_name = response.email;   
      });

      $scope.edit_exchange_setting_click = (function(){
        // add new class for the fields here dynamically        
      });
  }
share|improve this question
    
Have you considered using ng-class? –  Sphaso Mar 9 at 10:24
    
I already have class for my text fields. is it possible to add an extra class along with it using ng-Class? @Sphaso –  Shareer1 Mar 9 at 10:28
    
yes, ng-class will not remove your existing class –  Michael P. Mar 9 at 10:29
    
You can use conditional statements inside ng-class to toggle one class or the other. –  Sphaso Mar 9 at 10:30
    
Suppose if i want to add a class 'test' to the fields of my form along with the existing class. how do i do that using ng-class when the form is submitted? –  Shareer1 Mar 9 at 10:48

1 Answer 1

You can use the ngClass directive for that (documentation of ngClass)

If you want to add, let's say, green borders to your input element when the form is in the editable state, you will use ngClass as the following :

<input type="text" ng-class="{'greenBorder': editable}" ng-model="name" />

This will add the greenBorder css class only if the boolean variable editable is truthy. I simply defined greenBorder for the example as follows :

.greenBorder {
    border: 1px solid green;
}

Note that ngClass will not remove your existing classes, if any, added with class="...". It will just append or not the class greenBorder to them. Therefore, there is absolutely no problem if you have a form-control or any other class added statically.

You can see a demo of that in action

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.