1

我是 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 感觉自然的东西。

谢谢你。

4

2 回答 2

1

多尔吉舍夫的回答为我指明了正确的方向。

我像这样初始化我的表格元素：

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

然后我使用 CSS 使用 FontAwesome 的字体显示图标。例如，状态“正在运行”的 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 像素填充，然后是状态“正在运行”的文本。它看起来很棒！

于 2013-07-07T18:32:40.580 回答
0

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

<div class="{{MyList.name}}">
于 2013-07-04T11:58:31.740 回答