I have a form that initially has disabled fields. Users can only view the information unless they click the edit button, which will enable the fields with a new style (such as a green border). I want to add a class to these fields that I can customize in my CSS. What is the Angular way to achieve this?
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(){
// dynamically add a new class to the fields here
});
}