javascript - 如何根据 AngularJS 输入 class=ng-invalid 设置 Twitter Bootstrap class=error？

Question

我有一个问题，我的 CSS 没有生效(在 Chrome 中)，我认为与 Twitter Bootstrap 有一些冲突。

input.ng-invalid {
    border-color: red;
    outline-color: red;
}

我的模式在我的 Controller 中定义为:

$scope.hexPattern = /^[0-9A-Fa-f]+$/;

然后从实时 DOM 复制 HTML，我看到 ng-invalid 和 ng-invalid-pattern 都已设置，所以我的 ng-pattern 必须正常工作。

<div class="control-group">
    <label class="control-label" for="salt">Salt: </label>
    <div class="controls">
        <input type="text" id="salt" ng-model="salt" ng-pattern="hexPattern" class="ng-dirty ng-invalid ng-invalid-pattern">
    </div>
</div>

我在 Forms 的“验证状态”部分看到了在 Twitter Bootstrap Base CSS 部分，我发现我需要将 error 类添加到控制组 div。

<div class="control-group error">

问题:如何根据子输入class=ng-invalid设置class=error？这可以用一些 ng 类的软表达式来完成吗？我可以通过 Controller 中的代码进行设置吗？有没有办法像属性更改一样“.$watch”模式评估？还有其他想法来获得我的“红色”轮廓吗？

Answer 1

您可以使用 ng-class 指令轻松地做到这一点:

<form name="myForm">
  <div class="control-group" ng-class="{ error: myForm.salt.$invalid }">
    <label class="control-label" for="salt">Salt: </label>
    <div class="controls">
      <input type="text" name="salt" ng-model="salt" ng-pattern="hexPattern">
    </div>
  </div>
</form>

http://plnkr.co/edit/RihsxA?p=preview

编辑

使用 bootstrap 3.3.5 和 angular 1.4.2 的示例:

<form name="myForm">
  <div class="form-group" ng-class="{ 'has-error': myForm.salt.$invalid }">
    <label class="control-label" for="salt">Salt: </label>
    <input class="form-control" type="text" name="salt" ng-model="salt" ng-pattern="hexPattern">
  </div>
</form>

http://plnkr.co/edit/5JNCrY8yQmcnA9ysC7Vc?p=preview