html - 动态设置最后一行的 <hr> 分隔线样式

标签 html css angularjs

我有一个使用 angularjs 动态填充的元素列表。每行都用小时分隔符分隔。在生成的最后一行,我希望 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>

最佳答案

ng-repeat 中使用 $last 来应用带有 ng-class 的类。

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

仅供引用:ng-repeat 中的可用键是 $索引 $第一 $中间 $最后一个 $偶数 $奇数

更多信息在这里:https://docs.angularjs.org/api/ng/directive/ngRepeat

关于html - 动态设置最后一行的 <hr> 分隔线样式,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43194946/

相关文章:

html - 需要 css 以允许用户将摘要中的单个帖子标记为已读

javascript - 不同设备上的不同 unicode 版本

jquery - <li> 样式用 flexslider 覆盖 css

javascript - 如何用 HTML DOM 替换替换字符串

jquery - 菜单未作为列表打开

javascript - CSS动画没有动画

angularjs - AWS文件上传超过5mb-nodejs

angularjs - Yeoman 'grunt test' 在使用 'port already in use' 的干净项目上失败

angularjs - 使用 $routeProvider 时如何传递变量

html - 如何从 Outlook 2010/2013 中的 html 电子邮件模板回复中删除背景颜色