css - 如何根据某些条件在 ngRepeat 中使用不同的内容类型？

Question

对于我的问题，我试图用从服务器接收到的数据创建一个列表。在此列表中，默认情况下仅应显示 5 个顶部元素，如果列表 items["instance"] 包含超过 5 个元素，则应显示 more 按钮并在单击时显示这个按钮应该显示该 Accordion 内容的其余元素。

下面是我的代码

<div class="container-fluid" ng-controller="MainCtrl" id="bpNaminConvention">

                <accordion>
                    <accordion-group is-open="item.open" ng-repeat="item in namingConventions">
                        <accordion-heading style="margin-left: 0px">
                            <span class="pull-left glyphicon" ng-class="{'down-accordion': item.open, 'up-accordion': !item.open}" style="margin-right: 10px"></span>
                            <label class="filter-headItem">
                                <!-- <input type="checkbox" class="pull-left glyphicon" ng-click="filterHeaderClick(item.title, $event)" ng-model="master" value="{{item.title}}" style="margin-top:1px; margin-right:5px" /> -->
                                {{ item.title }}
                            </label>
                            <span style="margin-left: 15px;padding-left:10px; padding-right:10px; background-color: #FFCC4E">{{item.itemCount}}</span>
                        </accordion-heading>
                        <div>
                            <table style="margin-left: 12px">
                                <tbody>
                                    <tr>
                                        <td>
                                            <label class="filter-headItem">{{item.title}} should be named as </label><b> {{ item.contentText }}</b>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            <label class="filter-subItem">
                                                Example.
                                                <p>
                                                    <span ng-repeat="data in item.exampleText">
                                                    {{data}}<br/> 
                                                </span>
                                                </p>
                                                <br/> {{item.itemCount}} instance located for improper naming.
                                            </label>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            <label id="namingConventionInstances" class="filter-headItem">
                                                <ul ng-repeat="instance in item.filterItems" ng-show="item.filterEnabled" ng-switch="$last">
                                                    <li>
                                                        <span ng-switch-default>{{instance}}<br/></span>
                                                        <a class="namingConventionMoreATag" ng-click="showAllNamingConventionItems(item.title)" ng-switch-when="true">{{instance}}</a>
                                                    </li>
                                                </ul>
                                                <ul ng-repeat="instance in item.instance" ng-hide="item.filterEnabled">
                                                    <li><span>{{instance}}</span></li>
                                                </ul>
                                            </label>
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </accordion-group>
                </accordion>

</div>

$scope.init = function() {
    var result = [{"title":"Agents","contentText":"<Agents>","exampleText":["For Windows: Marketing","For Linux: Automation"],"itemCount":6,"open":true,"filterItems":["FIB","JAQULIN","NOMNOM","JAGERY","MINC","more"],"filterEnabled":true,"instance":["FIB","JAQULIN","NOMNOM","JAGERY","MINC","WIN2008-64","more"]},{"title":"Task","contentText":"<Connection>","exampleText":["DC_Oracle_Contact_INS","DC_Oracle_Contact_UPD","DC_Oracle_Contact_DEL","DC_Oracle_Contact_UPSERT"],"itemCount":10,"open":false,"filterItems":["C_FIB","C_TEST","C_TEST_2","DB1","DB1_2","more"],"filterEnabled":true,"instance":["C_FIB","C_TEST","C_TEST_2","DB1","DB1_2","DC1","DC2 FIB","DB to DB SM","DB to DB FIB","DR1_som","more"]},{"title":"Task Flow","contentText":"<Source Type>_<Target Type>_<Operation Type>","exampleText":["DC_Oracle _INS","DC_Oracle _UPD","DC_Oracle _DEL","DC_Oracle _UPSERT"],"itemCount":1,"open":false,"filterItems":["Task flow1"],"filterEnabled":false,"instance":["Task flow1"]},{"title":"Scheduler","contentText":"Schedule_<Frequency>","exampleText":["Schedule_Five_Minutes","Schedule_Hourly","Schedule_Daily"],"itemCount":5,"open":false,"filterItems":["daily","every 45 min","s2","test","testing"],"filterEnabled":false,"instance":["daily","every 45 min","s2","test","testing"]}];
    $scope.renderNamingConventionAccord(result);

  }
$scope.showAllNamingConventionItems = function(item) {
    console.log(item);
  }

  $scope.renderNamingConventionAccord = function(result) {
    $scope.namingConventions = result;
  }

  $scope.init();

下面是我 Accordion 的截图

![在此处输入图片描述][1]

这是一个更新 unfinished plunker link

总而言之，我需要解决以下 2 个问题

1. 如果列表项超过 5 个，则应显示 more，可单击以显示其余项。
2. more 按钮不应有 li 元素符号。

更新

添加更多关于我为什么使用 getBestPracticesNamingConventionData 函数的描述(检查 plunker link "helper.js")

我正在 getBestPracticesNamingConventionData 函数中准备服务器端数据 result 以供 accordion 使用。基本上需要以下元素

items["title"] //title of accordion
items["contentText"] //some text
items["exampleText"] //some more text
items["itemCount"] //*this count should be used to check >5 and truncate extra items and display only when more button is clicked
items["open"] //to trigger accordion open 
items["instance"] //*this is the item list which needs to be truncated and shown accordingly as stated above.

所以基本上我需要关于 * 以上元素的帮助，关于如何在 Accordion 中使用它。

更新

根据 NewDev 的要求我已经用最少的东西准备了一个 plunker。

Answer 1

感谢您简化问题中的代码。

要解决这个问题，您需要:

首先，您需要定义一个局部变量(针对 accordion 的 ng-repeat 的当前迭代)变量来更改要显示的元素数。一种方法是在 Controller 中定义它，但在这种情况下最好使用 ng-init .这需要在 item.instance 的任何祖先元素上完成的 ng-repeat ，例如在 <td> 上:

<td ng-init="limit = 5">

然后，实际限制ng-repeat的个数|结果，您可以使用 limitTo筛选。为过滤列表起别名会很有帮助——这只适用于 Angular 1.3。所以，这将是:

<td  ng-init="limit = 5">
  <ul ng-repeat="instance in item.instance | limitTo: limit as shownInstances">
    <li>{{instance}</li>
  </ul>
</td>

最后，您需要一个“显示更多”按钮。这是shownInstances的地方别名很有用，因为如果显示的实例数少于总数，您只想显示按钮:

<button ng-show="shownInstances.length < item.instance.length"
        ng-click="limit = limit + 5">
   show more
</button>

这是您更新的 plunker