javascript - 将独特的样式应用于 Angular 中 ng-repeat 列表中的每个 <li>

Question

我对 Angular 非常陌生，并且在如何“以 Angular 方式”处理某些事情上遇到了一些困难。请原谅我在这篇文章中的无知。

我目前有 6 个列表项，这些列表项是通过点击数据源并使用 ng-repeat 创建的。 。

<ul>
  <li ng-repeat="vote in votes" ng-click="vote.Score = vote.Score + 1">
    {{ vote.Id | covertToName }} has a score of {{ vote.Score }}
  </li>
</ul>

每个列表项下面都有一个“进度条”，它只是一个绝对定位的 :after伪元素。我的目标是增加进度条的:after的宽度psuedo 元素，当您单击列表项时，可以直观地显示每个元素拥有的票数。

我需要一种方法将自定义样式 ( width: ) 应用于 ng-repeat 创建的每个列表项当用户单击列表项时。例如，如果用户单击 John Doe 并且他的分数当前为 50，我需要他的进度条假定宽度为 51px，并将分数像素宽度应用于所有其他列表项。

非常感谢任何方向。

谢谢!

编辑:我正在使用 SCSS，并且无法控制 JSON 数据源。

Answer 1

如果您使用的是 SASS 等 CSS 预处理器，则可以使用 ng-class="progress" 轻松实现此目的。 progress 将保存一个类似 progress-51 的字符串。

SASS 代码

$class-slug: progress !default

@for $i from 0 through 100
    .#{$class-slug}-#{$i}:after
        width: 0px + $i

会发出

.progress-0:after {
    width: 0px;
}
.progress-1:after {
    width: 1px;
}
...
.progress-100:after {
    width: 100px;
}