以下是我的$scope.fields
[{"Puts":"109","name":"payments","Role":"admin","Entries":"109"},
{"Puts":"8","name":"employees","Role":"admin","Entries":"8"},
{"Puts":"3","name":"offices","Role":"admin","Entries":"3"},
{"Puts":"3","name":"productlines","Role":"admin","Entries":"3"},
{"Puts":"37","name":"products","Role":"admin","Entries":"37"},
{"Puts":"973","name":"orderdetails","Role":"admin","Entries":"973"},
{"Puts":"95","name":"orders","Role":"admin","Entries":"95"},
{"Puts":"37","name":"customers","Role":"admin","Entries":"37"},
{"Puts":"1265","name":"Total","Entries":"1265"}]
使用下面我可以形成一个表
<table>
<thead>
<tr>
<th>Name</th>
<th>Role</th>
<th>Entries</th>
<th>Puts</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="F in fields">
<td>{{F.name}}</td>
<td>{{F.Role}}</td>
<td>{{F.Entries}}</td>
<td>{{F.Puts}}</td>
</tr>
</tbody>
</table>
但我想要最后一行更大胆。
我可以在ng-repeat中使用ng-switch吗?
我尝试了很多,但无法通过。
P.S。 - 只能使用angularjs 1.0.8。
提前致谢。
〜阿吉特
答案 0 :(得分:0)
如果您只想要粗体样式,可以使用CSS选择器显式设置表格中的最后一行。
tr:last-child { font-weight: bold; }
如果您只希望这会影响表格的主体(看起来很可能来自您的数据),那么请在选择器前添加tbody。
答案 1 :(得分:0)
.my-table tr:last-child {
font-weight: bold;
}
但是如果必须在Angular中执行此操作,您可以在表达式中使用$index
属性。因此,当语句$index == (fields.length-1)
命中true
时,您就在最后一行。现在将其与ng-class
:
<强> MARKUP
<table class="table">
<tr ng-repeat="field in fields"
ng-class="{ 'table-total': $index == (fields.length-1) }">
<td>{{ field.Puts }}</td>
<td>{{ field.name }}</td>
<td>{{ field.Role }}</td>
<td>{{ field.Entries }}</td>
</tr>
</table>
<强> CSS
.table-total {
font-weight: bold;
}
可以找到Plunker here。
答案 2 :(得分:0)
你可以使用ng-switch
来做到这一点,但有更简单的方法可以做到这一点......
ng-repeat
的{{1}}变量为$last
,因此,如果您可以将其与boolean
结合使用,则会在最后一行更改行类...
这是示例代码......
ng-class
表格的最后一行将有<table>
<thead>
<tr>
<th>Name</th>
<th>Role</th>
<th>Entries</th>
<th>Puts</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="F in fields"
ng-class="{'last-row: $last}">
<td>{{F.name}}</td>
<td>{{F.Role}}</td>
<td>{{F.Entries}}</td>
<td>{{F.Puts}}</td>
</tr>
</tbody>
</table>
类...