Question

这是一个显示电影列表的角度应用。

此处链接到plunker：https://plnkr.co/edit/nSpPKefitlnDjoev3b0w?p=preview

简而言之，ng-repeat循环中有6个元素用于显示电影，它们彼此相邻放置，没有边距，但宽度和颜色各不相同，具体取决于它们的显示顺序（基于根据我的有限理解）。

的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>

我发现这些规则的相互作用特别令人困惑：

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;
}

我也很感激任何教程的链接，解释了ng-scope在这种情况下的工作原理。

Answer 1

div.ng-scope选择<div ng-repeat="show in shows">元素，因为ng-repeat在呈现元素时会将ng-scope类添加到元素中。

nth-child(odd)和nth-child(even)分别设置元素各自容器的奇数子项和偶数子项的样式。

p会影响所有元素，而p+p会影响紧跟在另一个元素之后的所有元素。 p+p+p会影响紧跟两个元素的所有个元素。

有关css中加号的更多信息，请查看此文章：What does the "+" (plus sign) CSS selector mean?

这个Angular应用程序布局的简单英文解释

1 个答案: