Create a grid with an ng-repeat Angular.js

Question

I have a list and I want to sort my items with a filter, where it is shown from highest to lowest according to the score of each person. I just want to show the top 8 of the 13 that exist. I would like to have a grid showing the highest to lowest score from left to right.

I can increase the score of a person by clicking on the 'sum score' button and entering the index of the object. I have no idea how to have this grid by default and that only people change.

<span ng-repeat='item in list | orderBy: "-score"'>
<p style='display:{{$index>7?"none":"block"}}'>
  {{item.name}} score {{item.score}}
</p>
</span>
<h2>index min 0 - max 12</h2>
<button ng-model='btn' ng-click='sumKey()'>Sum Score</button>
<input type='number' ng-model='mytext' max=12 min=0>  

$scope.list=[
 {'name': 'pedro', 'score':1},
  {'name': 'miguel', 'score':2},
  {'name': 'juan', 'score':3},
  {'name': 'david', 'score':4},
  {'name': 'yeison', 'score':5},
  {'name': 'doraemon', 'score':6},
  {'name': 'goku', 'score':7},
  {'name': 'vegeta', 'score':8},
  {'name': 'seiya', 'score':9},
  {'name': 'bruno', 'score':10},
  {'name': 'faver', 'score':11},
  {'name': 'cane', 'score':12},
  {'name': 'brye', 'score':13}
]

http://jsfiddle.net/bLrft3nx/

Thank you

Are you using any frontend libraries, like Bootstrap or Material design? — tavnab
– tavnab, Commented Aug 26, 2017 at 3:09

tavnab · Accepted Answer · 2017-08-26 03:34:42Z

1

For the limiting to the top 8, you can use the limitTo filter:

<span ng-repeat='item in list | orderBy: "-score" | limitTo: 8'>
  <p>
    {{item.name}} score {{item.score}}
  </p>
</span>

For the grid, since you mentioned Bootstrap (I'll assume 3.x, but it should apply to other versions), you can define a single row with multiple columns of class col-md-3 (and other sizes if you want to be responsive). This will effectively create a grid with 4 columns per row (since the Bootstrap grid is 12 slots wide, and it'll wrap to the next line every 12 / 3 = 4 columns).

<div class="row">
  <div class="col-xs-3" ng-repeat='item in list | orderBy: "-score" | limitTo: 8'>
    <p>
      {{item.name}} score {{item.score}}
    </p>
  </div>
</div>

Update

Here's a jsfiddle that demonstrates it. I also added classes col-sm-3 and col-xs-3 to account for the small size of the preview area; you can include all of the col-*-3 classes if you want to ensure it's always a grid, regardless of viewport size.

Update 2

You can just replace col-md-3 with col-xs-3 if you want the grid to apply to all viewport sizes; no need to add all the col-*-3 classes. The snippet above has been updated, and here's another jsfiddle.

edited Aug 26, 2017 at 3:34

answered Aug 26, 2017 at 3:22

tavnab

2,7541 gold badge21 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

yavg Over a year ago

thanks, I tried your code but not works.. jsfiddle.net/t8emvq5w

tavnab Over a year ago

I suspect it was because of the small preview area of jsfiddle. See my update.

Collectives™ on Stack Overflow

Create a grid with an ng-repeat Angular.js

1 Answer 1

Update

Update 2

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Update

Update 2

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related