Question

我在模板文件中使用了tabs指令（所有标签都在那里定义）。每个选项卡包含多个属于表单的文件（此单个表单字段被拆分为多个选项卡）。当整个表单经过验证时，某些字段可能会出现类＆＃39; .has-error＆＃39;。我如何突出显示（给出特殊的backgorund颜色）仅包含带有＆＃39; .has-error＆＃39;的字段的选项卡？类里面的相关标签内容？

Answer 1

解决方案如下：在ng-form：

中包装每个标签内容

    <div ng-form bind-validity="tab1Invalid">
      ...form controlls...
    </div>

使用here中的bind-validity指令（或任何等效方式将表单有效性状态传递给父级）。

现在根据表单有效性向标题页添加一个类：

  <tab>
    <tab-heading>
      <span ng-class="{boom: tab1Invalid}">...</span>
    </tab-heading>

    ...content...
  </tab>

工作解决方案here。

Answer 2

您可以在tab指令中添加一个css类（在本例中为＃34; my.tab＆＃34;）。然后你就可以这样做：

.my-tab .has-error {
  background-color: #f5f5f5;
}

---更新---

在认识到你并不是指实际的控件而是选项卡之后，我会建议这个解决方案：

为每个监视表单状态的选项卡添加一个指令。您可以只查看表单的$ valid属性，并根据$ valid值在选项卡的指令中设置突出显示。值将通过监视功能传递。

---更新--- 我不知道另一个答案中陈述的功能。非常完美！

如何突出显示包含.has-error类（angular ui-bootstrap）字段的选项卡

2 个答案: