Question

我是AngularJS（以及Javascript）的新手，我尝试在表格中显示不同的图标，具体取决于我模型中某个字段的值。

让我们说这是我的模特：

$ scope.MyList = [{name：“Production”，status：“Running”}， {name：“Test”，status：“Stopped”}];

这是一个用于在我的一个视图中显示模型的表：

<table class="table table-striped">
    <thead>
        <tr>
            <td>Name</td>
            <td>Status</td>
        </tr>
    </thead>
    <tbody>
        <tr ng-repeat="item in MyList">
            <td>{{instance.name}}</td>
            <td>{{instance.status}}</td>
        </tr>
    </tbody>
</table>

我想使用一个图标和文本显示状态。这样做的推荐方法是什么？我想使用AngularJS感觉很自然的东西。

谢谢。

Answer 1

dolgishev的回答指出了我正确的方向。

我将我的表格元素初始化为：

<tr ng-repeat="item in itemList">
   <td>{{item.name}}</td>
   <td class="{{item.status}}">{{item.status}}</td>
</tr>

然后我使用CSS来使用FontAwesome中的字体显示图标。这是例如州'Running'的CSS：

.Running:before {
    font-family: 'FontAwesome';
    font-size:1.3em;
    color:green;
    content: '\f00c';  /* the ok icon */
    padding-right: 4px; /* plus 4px spacing */
}

这将显示绿色的ok图标，然后是4像素填充，然后是“Running”状态的文本。它看起来很棒！

Answer 2

要解决此问题，您可以使用Angular指令ng-class。它允许您根据表达式设置元素类。你也可以在没有指令的情况下这样做：

<div class="{{MyList.name}}">

如何根据AngularJS中的模型在表格中显示图标？

2 个答案: