javascript - 如何在 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>

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

Answer 1

您可以为此使用 ngClass 指令 ( documentation of ngClass )

如果您想在 input 元素中添加绿色边框，当表单处于可编辑状态时，您将使用 ngClass如下:

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

仅当 bool 变量 editable 为真时，才会添加 greenBorder css 类。我简单地为示例定义了 greenBorder 如下:

.greenBorder {
    border: 1px solid green;
}

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

可以看到a demo of that in action