angularjs/font-awesome:如何使用表示错误的感叹号显示额外的表格单元格

Question

我有个问题。

我目前有一个html视图，可以显示来自web api响应的数据。

当返回数据时，会进行一些验证。数组中包含错误的元素由名为IsValid = true/false的元素标记。

当在html表中的ng-repeat内(使用前述数组)时，如果IsValid元素带来假的值，则通过用红色写入单元格边界来强调该表行。

我在想，用红色突出显示边框，显示一个警告这样的符号会很酷！标记，让用户知道该行包含一些错误数据。

我确实会显示一条消息，让他们知道如果希望成功提交数据，需要如何正确格式化数据。这已经存在了。我的目标是学习如何在错误的数据单元格周围显示一个红色边框，一个令人敬畏的警告图标。但是我不知道怎么做，我的想法是，我需要用"!“来显示/隐藏额外的表格单元格。标记包含错误的行，而不标记通过验证的行。但我不知道如何以这种方式操作html对象。我需要学习这个，我需要建议。

我认为应该是这样的：

<td ng-class="{'redColor': ai.IsValid === false}">{{ai.LegistarID}}</td>

我不会为背景颜色应用一个类，而是应用一个很棒的字体。对吗？再说一次，我还不知道该怎么做。

如果有人可以分享，解释，教我如何可能做到这一点，我非常感谢你愿意分享你的知识。

如果我在格式，写作，解释我的需求方面有错误，请节省你的时间责备我。我只是在尽我最大的努力，谦虚地寻求帮助。

我只包含使用ng-repeat和使用IsValid值的html。我没有包括任何angularjs/ javascript代码，但如果需要的话，我可以包括它。

HTML视图：

<table class="table table-striped mt-4 mb-5" id="tblAgenda">
    <thead>
        <tr>
            <th scope="col" width="20%">ID</th>
            <th scope="col" width="20%">Agenda</th>
            <th scope="col">Blob</th>
        </tr>
    </thead>
    <tbody>
        <tr ng-repeat="i in Items">
            <td scope="row" ng-class="{'redColor': ai.IsValid === false}">{{i.ID}}</td>
            <td ng-class="{'redColor': ai.IsValid === false}">{{i.Agenda}}</td>
            <td>{{i.Title}}</td>
        </tr>           
    </tbody>
</table>

CSS

.redColor { 
    border-color: #ac1d2c;
}

Answer 1

你不能给td元素添加一个字体很棒的类，所以只需在图标元素上使用ng-show或ng-hide，就可以得到你想要的字体出色类。

<td>
    <i class=“fas fa-exclamation-triangle” ng-show=“!ai.IsValid”></i>
</td>