ng-switch ng-repeat创建表

时间:2014-03-20 06:10:56

标签: angularjs

以下是我的$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。

提前致谢。

〜阿吉特

3 个答案:

答案 0 :(得分:0)

如果您只想要粗体样式,可以使用CSS选择器显式设置表格中的最后一行。

tr:last-child { font-weight: bold; }

如果您只希望这会影响表格的主体(看起来很可能来自您的数据),那么请在选择器前添加tbody。

答案 1 :(得分:0)

像史蒂夫提到的那样:你可以通过CSS轻松设置最后一行的样式:

.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> 类...