如何根据AngularJS中的模型在表格中显示图标? [英] How to display icons in a table depending on model in AngularJS?

问题描述

我是AngularJS(和Javascript)的新手，我尝试根据模型中字段的值在表中显示不同的图标.

I am new to AngularJS (and Javascript as well) and I try to display different icons in a table depending on a value in a field from my model.

让我们说这是我的模特:

Let's say this is my model:

$ scope.MyList = [{名称:生产"，状态:正在运行"}， {名称:测试"，状态:已停止"}];

$scope.MyList = [{ name: "Production", status: "Running"}, { name: "Test", status: "Stopped"}];

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

This is a table for displaying the model in one of my views:

<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中使用一些自然的东西.

I would like to display the status using both one icon and the text. What is the recommended way of doing it? I would like to use something that feels natural with AngularJS.

谢谢.

推荐答案

dolgishev的回答将我引向了正确的方向.

The answer from dolgishev pointed me into the right direction.

我像这样初始化我的表元素:

I initialice my table elements like this:

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

，然后使用CSS使用FontAwesome中的字体显示图标.例如，这是状态为运行"的CSS:

and then I use CSS for displaying the icon using a font from FontAwesome. This is for example the CSS for the state 'Running':

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

这将以绿色显示ok图标，然后以4像素填充，然后以文本形式显示正在运行".看起来很棒！

This will display the ok icon in green, then 4 pixel padding and then the text for the state "Running". It is looking great!

这篇关于如何根据AngularJS中的模型在表格中显示图标?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！