Angular JS转发器中的第一项而不是CSS:first-child

时间:2014-04-16 13:04:48

标签: javascript angularjs twitter-bootstrap-3 angularjs-ng-repeat angular-ui-bootstrap

我在项目中有一系列div,其中第一个需要与其他div不同。

所以我像往常一样将我的css设置为item:first-child{}

在某些情况下,可能会使用Angular JS生成这些div。我注意到在使用转发器时, ALL div是第一个孩子。

我可以使用自己的班级,因为"第一"在这里,但我只想拿起bootstrap的默认设置。

<div class="media" ng-repeat="i in [1,2,3,4,5,6,7,8]" ng-class="{first : $first}">
                <a class="pull-left" href="#">
                <img class="media-object" data-src="holder.js/80x80" alt="64x64" src="https://s3.amazonaws.com/uifaces/faces/twitter/ooomz/128.jpg" style="width: 80px;height: 80px;">
                </a>
                <div class="media-body">
                    <h4 class="media-heading">Media heading</h4>
                    Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
                </div>
            </div>

1 个答案:

答案 0 :(得分:1)

使用ng-repeat重复整个块。你可能想做类似的事情:

<div ng-repeat="i in iarray" class=media>
    <a class=pull-left href=#>
        ...

还要记住,这对第一个孩子来说。如果有:

<div ng-app>
    <some-non-div-tag>
    <div ng-repeat="i in iarray" class=media>

......它也不起作用。您必须使用:first-of-type

http://jsfiddle.net/27NWm/