How to add class on a button click in Angular JS

Question

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        
      });
  }

I already have class for my text fields. is it possible to add an extra class along with it using ng-Class? @Sphaso — Sha
– Sha, Commented Mar 9, 2015 at 10:28
You can use conditional statements inside ng-class to toggle one class or the other. — user1334319
– user1334319, Commented Mar 9, 2015 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? — Sha
– Sha, Commented Mar 9, 2015 at 10:48

Michel · Accepted Answer · 2015-03-09 19:06:15Z

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

edited Mar 9, 2015 at 19:06

answered Mar 9, 2015 at 18:42

Michel

28.6k6 gold badges67 silver badges72 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to add class on a button click in Angular JS

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related