CODEWITHSUNDEEP
javascriptangularjs
Andrew Hill
Andrew Hill

Reputation: 2253

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

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.

Upvotes: 1

Views: 337

Answers (4)

Ben Kauer
Ben Kauer

Reputation: 596

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

Upvotes: 1

Javierif
Javierif

Reputation: 632

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

Upvotes: 0

Fraction
Fraction

Reputation: 463

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>

Upvotes: 0

Arun Kumar M
Arun Kumar M

Reputation: 1601

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

Upvotes: 0

Related Questions