如何在Angular JS中单击按钮添加类

Question

我有一个带有默认情况下禁用的字段的表单。 除非按下编辑按钮，否则用户只能查看其中的信息。 当他们单击“编辑”按钮时，这些字段将重新启用具有某些新样式（例如绿色边框）的字段，我想向这些字段添加一个类，以便在CSS中设置样式。 Angular的方法是什么？

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>

调节器

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

Answer 1

您可以ngClass使用ngClass指令（ ngClass的文档 ）

如果要在表单处于可编辑状态时在 input元素上添加绿色边框，则将使用ngClass ，如下所示：

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

仅当editable布尔变量为true时，才会添加greenBorder css类。 我为示例简单定义了greenBorder ，如下所示：

.greenBorder {
    border: 1px solid green;
}

请注意， ngClass不会删除您现有的用class="..."添加的class="..." 。 它将只是将是否追加class greenBorder到它们。 因此，如果您有一个form-control或静态添加的任何其他类，绝对没有问题。

您可以看到实际的演示