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指令（documentation of ngClass）

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

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

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

.greenBorder { border: 1px solid green; }

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

您可以看到a demo of that in action

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

1 个答案: