Ng-repeat: Order a List Vertically rather Horizontal

    I don't think I need to explain the setup here since the title explains it all and if not there are similar questions I found that can explain the question for me (in the resource).

The Solution 
Example, I didn't write this example but I did think of one way to improve upon  it. If we have already defined the styles as classes we can than use the $odd or $even in ng-repeat. Since $odd or $even are Boolean we can use either one with a inline if statement and give the <li> tag a class based on it. I haven't tested this but I'm sure it will work, what I actually am curious about is that in the example the definition of odd and even since ng-repeat also have these variables. I wonder if they would ever have a conflict? As a side note for myself note that the example isn't in a un-order list but rather a div. That could another possibly reason behind my issue below.

A Possible Alternative Solution
column-count - CSS | MDN - Example

Problems I Faced
     I believe this is the first time I've seen the column-count but I can't recall. I did try using it in my case but found a slight issue with the children elements in a list. As some of the text was cut off on the left side if I used the style on the ul tag, than I tried to use it on the div wrapped around it. I then saw the text get cut off on the right side. I thought it was because of the styling that I had on the text but it didn't appear to be so. I could have spent more time investigating this issue but fundamental I didn't like this approach. Also since I was trying to support legacy browsers it won't have made a difference. I would still have to create separate styling that was compatible and that's if the structure would allow it.  I want to use this styling I think it would be very useful to know in the future where legacy browsers aren't a concern.

Resources
ng-repeat items horizontal to vertical - Stack Overflow - Html5 Solution
Horizontal ng-repeat(er) with new row breaks - Stack Overflow
AngularJS: API: ngRepeat

Comments

Popular posts from this blog

Nginx Best Practices Extended

Installing Windows on Acer chromebook 15 cb3-532

Entity Framework: ToListAynsc & WhereAsync