Question

我有一个使用angularjs动态填充的项目列表。每行用hr分频器分隔。在生成的最后一行，我希望hr分频器更加大胆和不同。我该怎么做呢？

<div class="panel-body">
  <div ng-repeat="item in data.list track by $index" style="margin-bottom: 1em;">
    <h4><img class="icon" src="{{item.icon}}" height="30" width="30"> &nbsp;<strong>{{item.type}}</strong> &nbsp;&nbsp;<font size = 2><i class="fa fa-check-circle-o" style="color:green"/> Done</font>&nbsp;&nbsp;<i class="fa fa-edit pointer" ng-click="c.onWidget(item)"/></h4> 
  <p><strong>My Stuff:</strong> &nbsp;{{item.mystuff}}</p>
  <p><strong>Your Stuff:</strong> &nbsp;{{item.yourstuff}}</p>
  <hr>
</div>

Answer 1

在$last中使用ng-repeat来申请ng-class的课程。

<div ng-repeat="foo in bar">
  ...
  <hr ng-class="{true : 'last-hr-class', false : 'regular-hr-class'}[$last]"/>
</div>

仅供参考：ng-repeat内的可用密钥是 $index $first $middle $last $even $odd

此处有更多信息：https://docs.angularjs.org/api/ng/directive/ngRepeat

Answer 2

您可以使用$index和列表的长度来确定您在最后一个项目的时间：

<hr ng-class="{'bolder': $index == data.list.length - 1 }"/>

Answer 3

您可以使用CSS的 :last-of-type 伪选择器实现此目的：

＆＃13;

hr:last-of-type {
  border: none;
  height: 1px;
  color: #333; /* Old IE */
  background-color: #333; /* Modern Browsers */ 
}

＆＃13;

<hr />
<hr />
<hr />

＆＃13;

请注意，您的Angular循环也会输出父<div>，因此您还需要定位此div：

div > hr:last-of-type { }

希望这有帮助！：）

动态样式化最后一行的<hr />分隔符

3 个答案: