嵌套的ngRepeat限制不起作用

Question

I'm currently having a problem with ng-repeat and limiting the amount of elements being displayed in my view. I'm wondering if it has to do with being a nested loop. Here is the code:

<li style="cursor:pointer; margin:8px;" class="span3" ng-repeat="psp in preSplitPrompts" ng-click="selectRelatedSplitPanels($index)">

    <div ng-class="$first ? 'panelBackground' : 'altPanelBackground'" class="thumbnail splitPanel">
        <h3>{{ (psp.promptname) ? psp.promptname : "No Name From API" }}</h3>
        <hr>
        <h2 ng-repeat="postsplit in psp.postSplit | limitTo: 1">{{ postsplit.metrics.preSplitTotalCount ? postsplit.metrics.preSplitTotalCount : 0 }}</h2>
        <p>Visits</p>
    </div>

</li>

I've tried limiting the list item by doing limitTo:1 and that works fine. It's only when trying to limit the postsplit. Thanks for the help.

This code works:

<li style="cursor:pointer; margin:8px;" class="span3" ng-repeat="psp in preSplitPrompts | limitTo: 1" ng-click="selectRelatedSplitPanels($index)">

    <div ng-class="$first ? 'panelBackground' : 'altPanelBackground'" class="thumbnail splitPanel">
        <h3>{{ (psp.promptname) ? psp.promptname : "No Name From API" }}</h3>
        <hr>
        <h2 ng-repeat="postsplit in psp.postSplit">{{ postsplit.metrics.preSplitTotalCount ? postsplit.metrics.preSplitTotalCount : 0 }}</h2>
        <p>Visits</p>
    </div>

</li>

Here is the data object:

Answer 1

尝试这个：

ng-class="{$first ? 'panelBackground' : 'altPanelBackground'}"