Question

我对角度很新，我在绕着如何处理“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伪元素的宽度，以便直观地显示每个元素的投票数。

当用户点击列表项时，我需要一种方法将自定义样式（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;
}

Answer 2

您可以尝试以下

li:first-child:after { /*styles*/ }
li:second-child:after { /*styles*/ }
li:third-child:after { /*styles*/ }
li:fourth-child:after { /*styles*/ }
li:fifth-child:after { /*styles*/ }
li:sixth-child:after { /*styles*/ }

Answer 3

如果您需要基于值的精确像素，我不认为类非常有用，因为您不知道哪个元素需要什么样式。也许您可以使用内联样式，即使这不是最佳实践。

示例：

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

Answer 4

mm ..你可以在对象投票中创建属性，如下所示：

var votes = [{Id:0,Score:0,width:"first"},{Id:1,Score:0,width:"second"},{Id:2,Score:0,width:"third"}];

然后你可以使用ng-class为每个li做一个独特的风格：

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

并且需要定义这个样式：

.second {
  width: 50%;
  background:red;
}
.first {
  width: 20%;
  background: blue;
}
.third {
  width: 30%;
  background: orange;
}

将唯一样式应用于Angular中ng-repeat列表中的每个<li>

4 个答案: