对每种样式应用独特的样式 <li> 在Angular的ng-repeat列表中

Question

I am very new to angular and I am having some difficulty wrapping my head around how to handle certain things "the Angular way". Please forgive my ignorance in this post.

I currently have 6 list items that are created by hitting a data source and using 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>

Each of these list items has a "progress bar" below it which is simply a absolutely positioned :after psuedo element. My aim is to increase the width of the progress bar's :after psuedo element when you click on the list item to give you a visual display of the number of votes each element has.

I need a way to apply a custom style ( width: ) to each of the list items created by the ng-repeat when a user clicks on a list item. For example, if a user clicks on John Doe and his Score is currently at 50, I need his progress bar to assume a width of 51px as well as apply the score pixel width to all other list items.

Any direction is greatly appreciated.

Thank You!

Edit: I am using SCSS and I have no control over the JSON data source.

Answer 1

If you're using a CSS preprocessor like SASS you can easily achieve this by using ng-class="progress" . progress would hold a string like progress-51 .

The SASS-code

$class-slug: progress !default

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

would emit

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

Answer 2

You can try as below

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

If you need exact pixels based of values I dont think classes is really useful since you don't know what element need what style. Perhaps you can use inline styles for this even though it is not best practise.

Example:

<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.. u can create attrib in object votes, like this:

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

And then u can use ng-class to do a unique style each 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>

and need define this styles:

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