-1

This is an angular app that displays a list of movies.

Link to plunker here: https://plnkr.co/edit/nSpPKefitlnDjoev3b0w?p=preview

In short, there are 6 elements in the ng-repeat loop to display the movies, and they are placed one next to the other with no margin, but with varying widths and colors depending on the order in which they appear(based on my limited understanding).

Index.html:

<div class="main" ng-controller="MainController">
        <div class="container">
            <div class="content"> 
                <div ng-repeat="show in shows">
                  <div class="rank">{{$index + 1}}</div>


                       <div class="img_container">
                            <img class="img-responsive" ng-src="{{show.series_img}}">
                       </div> 
                        <h2 class="series">{{show.series}}</h2>
                        <p class="genre">{{show.genre}}</p>
                        <p class="run-start">{{show.run_start}}</p>
                        <p class="description">{{show.description}}</p>
                </div>
            </div> 
        </div>
   </div>

The interaction of these rules is what I find particularly confusing:

div.ng-scope:nth-child(odd) h2 {
    width: 400px;
}

div.ng-scope:nth-child(even) p+p {
    width: 400px;
}

p {
    background: #f9f9f9;
    display: block;
    float: left;
    font-size: 18px;
    height: 200px;
    margin: 0;
    padding: 30px;
    width: 200px;
}

div.ng-scope p+p {
    background: #e5e5e5;
}

div.ng-scope p+p+p {
    background: #000;
    color: #fff;
    font-size: 14px;
    width: 800px;
}

I would also appreciate any links to tutorials explaining how ng-scope works in this context.

simeg
  • 1,889
  • 2
  • 26
  • 34
Cbroph
  • 36
  • 5
  • 1
    What is your question? I can't seem to find it. – simeg Feb 22 '16 at 22:08
  • @simeg Hard to be more direct, it's the post's title. Here it is in case you missed it: "Plain English explanation of this Angular app's layout" – Cbroph Feb 22 '16 at 22:10
  • If you could boil it down to a single programming question, what would that be? If I'd guess I'd say you are asking why some elements are wider than other? In that case it's a CSS question and has nothing to do with Angular or JS. – simeg Feb 22 '16 at 22:13
  • We don't do things like "any links to tutorials". [It's specifically off-topic in fact:](http://stackoverflow.com/help/on-topic) *Questions asking us to recommend or find a book, tool, software library, tutorial or other off-site resource are off-topic for Stack Overflow as they tend to attract opinionated answers and spam. Instead, describe the problem and what has been done so far to solve it.* Please read that page, and [ask], to find out how to craft a good question. A work request ("do this for me") is generally not a good question. – Heretic Monkey Feb 22 '16 at 22:18
  • @simeg Thanks for trying to help. But it's actually the interaction of ng-scope with the CSS rules that I don't understand, exactly as I put it by saying: "The interaction of these rules is what I find particularly confusing." Can you give a plain English explanation of how these rules are applied as the interpreter goes through the loop? If so, I welcome your input. – Cbroph Feb 22 '16 at 22:19
  • @mike-mccaughan If you could answer my question as stated in the post's title, that would be great. Again, the question is for a "Plain English explanation of this Angular app's layout". The request for a good tutorial was an afterthought. Glad to see the SO police are alive and well! lol – Cbroph Feb 22 '16 at 22:22
  • 1
    @Cbroph If you could go ahead and respect the owners and maintainers of the site by following the rules they laid out for their site, that'd be great, m'kay? See, I can do snark too! – Heretic Monkey Feb 22 '16 at 22:24
  • @mike-mccaughan Dude, you got snark because you were condescending and wrong in your answer. I addressed your answer, so do you care to address my reply? If not, I'd ask the same of you. Question was legit, so go police elsewhere and respect the rules of the site. – Cbroph Feb 22 '16 at 22:26
  • 1
    @Cbroph I suggest you read the How to Ask (as was linked in a previous comment) and define your question in a more clear way so we know exactly what you want to know. A "how does the technology behind this website work" question is hard to answer. – simeg Feb 22 '16 at 22:26
  • 1
    We have no idea what part of this you don't understand. Nobody is going to go through each css rule and explain it.... question is simply far too broad for a reasonable answer – charlietfl Feb 22 '16 at 22:27
  • @simeg do you mean maybe I should tweak it to look more like this question, that was upvoted three thousand times?http://stackoverflow.com/questions/487258/plain-english-explanation-of-big-o – Cbroph Feb 22 '16 at 22:28
  • @charlietfl It's six elements that get displayed in a for loop, and there are exactly five rules to explain in plain English, as linked above. You're calling this too broad a question? – Cbroph Feb 22 '16 at 22:31
  • Every bit of it can be easily researched by studying what css selectors do. It is expected of those asking questions that they do their own basic research first – charlietfl Feb 22 '16 at 22:33
  • @charlietfl oh, so now you're saying it's not too broad, but it's RTFM. So, which is it? You're wasting my time. If you don't want to answer the question, please go police elsewhere. – Cbroph Feb 22 '16 at 22:35
  • @Cbroph both ... and one more simple way to research this is to inspect the live html in browser dev tools element inspector which would probably answer most of whatever confusion you have. You can see all rules that apply to any element in the page...ranked in order of specificity as well as see all generated classes. It even allows you to toggle or edit rules in live page – charlietfl Feb 22 '16 at 22:45

1 Answers1

1

div.ng-scope selects the <div ng-repeat="show in shows"> element because the ng-repeat adds the ng-scope class to the element when it renders.

nth-child(odd) and nth-child(even) set the styles of the odd and even children of the elements' respective containers, respectively.

p affects all <p> elements, while p+p affects all <p> elements following immediately after another <p> element. p+p+p affects all <p> elements immediately following two <p> elements.

Check out this article for more information about the plus symbol in css: What does the "+" (plus sign) CSS selector mean?

Community
  • 1
  • 1
Cameron
  • 434
  • 2
  • 4