如何 add/create/draw 在带有标签 Angular 的 div 内的 md-radio-buttons 之间划线

Question

我想在具有动态数据的组件的 md-radio-buttons 之间添加线条。

<md-radio-group ng-model="selected"  layout="row">
  <div ng-repeat="i in items">
    <label>{{i.name}}</label>
  <md-radio-button  value="{{i}}"></md-radio-button>
  </div>
</md-radio-group>

它应该在每两个按钮之间画一条线。线长应设置为最小距离，但如果需要可以自动增加

CodePen

Answer 1

我添加了

class="{{$last ? 'last' : '' }}"

到

md-radio-button

指令，和

<div class="line"></div>

里面。

现在我们所要做的就是将这段 css 代码添加到您的样式表中：

.line {
    position: absolute;
    height: 5px;
    width: 52px;
    background: grey;
    left: -11px;
    top: -2px;
 }

 .last .line {
      display: none;
 }

编辑

我修正了我的示例以符合您新的动态要求请参阅 This CodePen 我所做的是在前后添加两个 "line" div。每行占容器 div 宽度的 50%，因此它们一起覆盖了容器的整个宽度。 ng-repeat 中第一个和最后一个 div 的处理方式不同 -> first 不会显示 "before" 行，last 不会显示 "after"

希望它能解决您的问题

如何 add/create/draw 在带有标签 Angular 的 div 内的 md-radio-buttons 之间划线

How to add/create/draw line between md-radio-buttons inside div with label Angular Materials

javascript

css

angularjs

material-design

angular-material

编辑