对每个<李>在Angular中的ng重复列表中

Apply unique styles to each <li> in an ng-repeat list in Angular

本文关键字：ng 中的 列表 Angular gt lt      更新时间：2023-09-26

我对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 psuedo元素。我的目标是在单击列表项时增加进度条的:after psuedo元素的宽度，以直观显示每个元素的票数。

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

任何方向都将不胜感激。

谢谢！

编辑：我使用的是SCSS，无法控制JSON数据源

如果使用像SASS这样的CSS预处理器，则可以通过使用ng-class="progress"轻松实现。CCD_ 7将保持类似于CCD_ 8的字符串。

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;
}

您可以尝试以下

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*/ }

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

示例：

<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>

mm。。u可以在对象投票中创建attrib，如下所示：

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

然后你可以使用ng类在每个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;
}
相关文章：