Question

这是我的ng-repeat

<div ng-if="feed.link" articlesource source='{{article.link}}' class="post" ng-    repeat="article in data.value.items | limitTo:5"> 

            <img ng-if="articlesource != 'FACEBOOK'" title="{{article.title}}" alt="{{article.title}}" class="blog-image-ind" src="{{article.image}}" height="100" width="240" style="float:left;"> 
            <img ng-if="articlesource == 'FACEBOOK'" title="{{article.title}}" alt="{{article.title}}" class="blog-image-ind" src="/shared/images/facebook_long.png" height="100" width="240" style="float:left;"> 
            <div class="postMid"> 
                <H3><a style="color: #A4A4A4;" href="{{article.link}}">{{article.title | htmlToPlaintext | ellipsis:40}}</a></H3>
                <div> {{article.description | htmlToPlaintext | blogellipsis:160}}</div>
            </div>
            <div class="postRight"> 
                <p> {{article.pubDate.substr(0, article.pubDate.indexOf(':')-2).trim()}}
                <br>
                <div ng-if="feed.name != 'THE FEED'"><p ng-if="articlesource != 'FACEBOOK' || feed.name != 'THE FEED'">BY {{article['dc:creator'] | uppercase}}</p></div>
                <p ng-if="feed.name == 'THE FEED'">{{articlesource}}</p>
                </p>

                <a ng-if="articlesource != 'FACEBOOK'" class="postRight" href="https://sam.containerandpackaging.com">{{article['slash:comments']}} Comments </a>   

            </div>
            <br clear="all"> 
        </div>

我想在我的ng-repeat中加入一些东西，除了最后一个之外，它允许div的所有底部都有一个边框。

Answer 1

使用Css

div.post {
  border-bottom: #ff0000;
}

div.post:last-child {
  border-bottom: none;
}

：last-child选择器匹配其父级的最后一个子元素。

Answer 2

在转发器上放置一个类$last不为真的条件：

ng-class="{'myBorderClass : !$last }"

在转发器的最后一次迭代中，

$last为true。

Answer 3

您可以使用ng-repeat的$ last值来设置ng-class。像下面的伪代码。

<div ng-class="{'noborderclass':$last}"></div>

Answer 4

您有两种选择：Javascript（Angular）或CSS。使用angular，您可以像$last那样使用：

<div ng-class="{'with-border': !$last}">

使用CSS，您可以使用选择器:last-of-type：

div {
    border-bottom: 1px solid black;
}

div:last-of-type {
    border-bottom: 0;
}

就个人而言，我选择CSS，因为我比JS更信任CSS。

Ng-Repeat - Angular JS

4 个答案: