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

Popular posts from this blog

Aspetcore: NLog with Postgresql

This Article is base ASP.Net Core 2 and the latest version of Nlog. 1. Install NLog and the Postgresql Package Using NuGet to install the package into your ASP.NET Core project: PM > Install-Package NLog.Web.AspNetCore PM > Install-Package Npgsql 3. Register NLog Add in your Startup.cs  public void Configure ( IApplicationBuilder app, IHostingEnvironment env, ILoggerFactory loggerFactory ) { ... env.ConfigureNLog( "nlog.config" ); ... // make sure Chinese chars don't fk up Encoding.RegisterProvider(CodePagesEncodingProvider.Instance); //add NLog to ASP.NET Core loggerFactory.AddNLog(); //add NLog.Web app.AddNLogWeb(); } 4. Add to Your Controller Add a logger object to your Controller. private readonly ILogger<YourController> _logger; Modify the constructor to use it public YourController ( ILogger<YourController> logger = null ) { if ( null != logger) { _logger = logger; ...
Read more

Mongodb Cheatsheet

This cheat sheet is based on the latest version of mongodb, which initial had setup and didn't encounter any problems. However that all changed when I was working remote and forgot I disabled the port no my network, rather than with the server. So I went pointing around where I didn't need to and ended up messing things up. The Best tutorial out there is of course on digital ocean for my setup on ubuntu 16.04 , this articles isn't so much about getting setup. I just wanted to include it because I found myself looking back at it to see if I missed a step. Bugs/Problems Now comes all the messed up things I found and had to deal with. firewall - Port seems to be open, but connection refused try using 0.0.0.0 in the bin_ip for the /etc/mongo.conf try sudo ufw disable and check to see if it works without the firewall (probably still wont but worth a shot), then just sudo ufw enable. Make sure port 27017 is open. Then check this  linux - Connection refused to MongoDB e...
Read more

Installing Windows on Acer chromebook 15 cb3-532

Much of my notes are just small problems I faced (what's new!) haha. Either way this was a really fun project to do for a friend and I got excited once I research all the information. You can find instruction videos but what helped me the most was the coolstar website. Sadly they don't have parameters in the url so I can link the machine I used in this article. -  https://coolstar.org/chromebook/windows-install.html Scared of messing with the bios? Don't be!    So you need to first remove the screw to put a legacy bios on the machine. Its easy to backup the chrome os one and with the same steps to change it. You can go back in and revert to the chrome version bios. Its that last part that had me worried and its very easy to do.  Problems getting into Developer Mode?   Follow the instructions to the letter, during the step to disable the OS verification, press Ctrl-D to boot into os. If you hear two beeps I would go back to set one. I got in a loo...
Read more