当表单无效时，将CSS应用于按钮

Question

HTML

<div class="filterButt">
      <input type="hidden" name="reportParams">
      <span class="pull-right">
         <button type="submit" ng-disabled="!filter.$valid" ng-click='filterComponents()' data-toggle="modal" id="filterClose" class="btn-flat default" href="#myModal1"><i class="icon-ok-sign">Save</i></button>
      </span>
</div><!--#filterButt-->

CSS

.btn-flat {
  display: inline-block;
  margin: 0;
  line-height: 15px;
  vertical-align: middle;
  font-size: 12px;
  text-shadow: none;
  box-shadow: none;
  background-image: none;
  border: 0 none;
  color: #fff;
  font-weight: 500;
  border-radius: 4px;
  background: #2b73b0;
  border: 1px solid #3883c0;
  cursor: pointer;
  padding: 7px 14px;
  -webkit-transition: all .1s linear;
  -moz-transition: all .1s linear;
  transition: all .1s linear;
}

按钮图片

我在这里使用AngularJS（每个人都知道:-)）。在这里我想在表单无效时禁用保存按钮，我可以这样做，但我还想在表单有验证错误时应用其他一些CSS，如灰色按钮等。

我尝试过如下的ng-class

ng-class="{btn-disable: !filter.$valid }"

但它没有适用，有人可以帮我吗？

由于

Answer 1

好吧，HTML 块缺少 form tag，所以我不知道您的表单类是什么。

所以我只能在 scss 中使用 form 和 button 标签：

form {
    &:valid {
        background-color: green;
        button[type="submit"] {
             background-color: lightgreen;
        }
    }
}

Answer 2

尝试更改

ng-class="{btn-disable: !filter.$valid }"

到

ng-class="{'btn-disable': !filter.$valid }"

请注意单引号。

查看this fiddle的差异（并确保查看JS控制台中的错误！）