The Author Online Book Forums are Moving

The Author Online Book Forums will soon redirect to Manning's liveBook and liveVideo. All book forum content will migrate to liveBook's discussion forum and all video forum content will migrate to liveVideo. Log in to liveBook or liveVideo with your Manning credentials to join the discussion!

Thank you for your engagement in the AoF over the years! We look forward to offering you a more enhanced forum experience.

372567 (12) [Avatar] Offline
#1
Page 44 has the following code:

<div class="list-area-animation"
<div class="list-wrapper">
<ul class="list my-repeat-animation"
ng-repeat="status in storyboard.statuses">
<h3 class="status">{{status.name}}</h3>
<hr/>
</ul>
</div>
</div>

This causes two rows of display ("To Do" etc. on one row and a series of lines on the next). Looking at the code, I would have expected 10 rows, with "In Progress" below the line. Does ng-repeat cause only two rows to be produced?

The following code produces six rows:

<div>
<div>
<ul>
1
<hr>
</ul>
<ul>
2
<hr>
</ul>
<ul>
3
<hr>
</ul>
</div>
</div>

Thanks.
Lukas Ruebbelke (107) [Avatar] Offline
#2
If I understand the question correct, the reason the stories are not all in one column is for a few reason.

The first reason is that we are creating a column for each status with ng-repeat="status in storyboard.statuses" and then floating them side by side with this CSS

.list {
    list-style-type: none;
    float: left;
    margin: 60px 5px 80px;
    padding: 4px 3px 3px 3px;
    position: relative;
    width: 300px;
}


And then with each column, we are doing ANOTHER ng-repeat for all the stories. But we are filtering those stories by the status of the story in this line here

ng-repeat="story in storyboard.stories | filter: {status:status.name}"


which I get into in the next two pages.

Does this make sense? Happy to elaborate further if you would like!
372567 (12) [Avatar] Offline
#3
I understood _why_ you are creating one column for each status. I didn't understand _how_ it happens when I asked the question. From your reply, I understand that the css (class list) causes it. Thanks.

By the way, your book is great -- I am loving it. I am also loving angularJS.

I am an eager earnest student and have some ideas on how to make teaching these kind of courses better. Please feel free to PM me.Thanks.
Lukas Ruebbelke (107) [Avatar] Offline
#4
Awesome! Thanks for the kind words!

A few other things you may find helpful...

Check out my blog at http://onehungrymind.com/ - there are a ton of cool projects to play around with.

Also, I have a free series on egghead.io that you may find helpful.

https://egghead.io/series/angularjs-app-from-scratch-getting-started

Shoot me a note on my blog - would love to stay in touch. #highFive