使用UI.Bootstrap。和角度。我想在面板上显示手风琴中的行数

时间:2015-11-20 20:36:24

标签: angularjs twitter-bootstrap

我正在使用angularJS抓取并显示数据,我还有一个手风琴也将显示数据表,我可以使用{{valdosta.length}}计算行数。但是我希望在那里显示一个徽章,以便在打开手风琴之前它会在面板上显示数字。该网站的其他部分使用相同的accorion所以我不想弄乱另一个,因为它不需要徽章。这是视图的代码,这是一个面板,因为它是相同的,因为发布其他面板是多余的。我看到一个班级="徽章"但是我可以把{{valdosta.length}}放在哪里?我也使用bootstrap 3

<div ng-controller="MainController">
    <div class="text-center">
        <ul class="nav nav-tabs nav-tabs-google">
            <li class="active">
                <a href="">
                    Rail Car Multi Mill Inquiry
                </a>
            </li>
        </ul>
    </div>
<accordion close-others="oneAtATime">
    <accordion-group heading="Counce" is-open="status.isFirstOpen">

        <table class="table table-striped table table-hover">
            <thead>
                <tr>
                    <th>Ship To #</th>
                    <th>Ship To Mnemonic</th>
                    <th>Ship To Name</th>
                    <th>Order #</th>
                    <th>Load #</th>
                    <th>Rail Car Initials</th>
                    <th>Rail Car #</th>
                    <th>Way Bill #</th>
                    <th>Carrier Name</th>
                </tr>
            </thead>
            <tbody>
                <tr class='clickable-row' data-href='//valcmmsweb.pca.com/DocumentLibrary/' ng-repeat="item in counce">
                    <td>{{item.shipToNumber}}</td>
                    <td>{{item.shipToMnemonic}}</td>
                    <td>{{item.shipToName}}</td>
                    <td>{{item.orderNumber}}</td>
                    <td>{{item.loadNumber}}</td>
                    <td>{{item.railCarInitials}}</td>
                    <td>{{item.railCarNumber}}</td>
                    <td>{{item.wayBillNumber}}</td>
                    <td>{{item.carrierName}}</td>
                </tr>
            </tbody>
        </table>
    </accordion-group>
    </accordion>

1 个答案:

答案 0 :(得分:1)

根据您提供的内容,您可以使用<accordion-heading>标记。目前尚不清楚这种观点是否会在您不想要计算的情况下重复使用 - 如果是这样,那么您可以根据自己的要求使用ng-showng-if

<accordion close-others="oneAtATime">
    <accordion-group is-open="status.isFirstOpen">
        <accordion-heading>
            Counce <span class="badge">{{counce.length}}</span>
        </accordion-heading>

        <!-- the table -->
    </accordion-group>
</accordion>