使用 angular 打开页面时如何展开折叠？

Question

场景

我正在尝试在页面启动时打开折叠展开。

我有两部分 HTML 代码，一个是 Angular 代码中的图标和相关点击功能。 HTML的第二部分是显示点击后数据的数据部分。

和扩展功能允许在或多或少之间进行打开切换。

问题是如何使它在页面加载时保持打开状态。 ? 我尝试了多种方法来做到这一点，但它仍然崩溃。 \

请提出一些建议，方法有问题。

代码

HTML

<td uib-tooltip="{{a.s.length}} s" tooltip-enable="a.s.length > 1" tooltip-append-to-body="true" tooltip-placement="left">
            <span class="auc-table__s-moreless-place">
                <span class="glyphicon glyphicon-plus pointer" aria-hidden="true"  ng-if="a._sExpanded + 1 < a.s.length" ng-click="expandCollapses(a, true)" uib-tooltip="Show more" tooltip-append-to-body="true"></span>
            </span>
            <span class="auc-table__s-moreless-place">
                <span class="glyphicon glyphicon-minus pointer" aria-hidden="true" ng-if="a._sExpanded" ng-click="expandCollapses(a, false)" uib-tooltip="Show less" tooltip-append-to-body="true"></span>
            </span>
        </td>

HTML 数据

 <tr ng-if="a._sExpanded" ng-repeat="b in a.s.slice(1, a._sExpanded + 1)">
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td>{{ bcv('Firm', a, b) }}</td>
        <td></td>
        <td class="auc-table__col--auc-table__col--numbers">{{ b.volume }}</td>
        <td class="auc-table__col--auc-table__col--numbers">{{ bcv('Price', a, b) }}</td>
        <td>
            <span class="glyphicon glyphicon-edit pointer modify margin" uib-tooltip="Modify Order" aria-hidden="true" ng-if="::bcv('canModify', a, b)" ng-click="openDialog(a, b)"></span>
            <span class="glyphicon glyphicon-remove pointer cancel margin" uib-tooltip="Cancel Order" aria-hidden="true" ng-if="::bcv('canCancel', a, b)" ng-click="cancel(a, b)"></span>
        </td>
        <td></td>
   </tr>

角度

    $scope.expandCollapses = function (auc, expand) {
        var pageSize = $scope.sScroll.pageSize;
        var expanded = auc._sExpanded || 0;
        var ls = auc.s && auc.s.length || 0;


        // expanded += pageSize - (expanded ? 0 : 1);


        if (expand) {
            if (expanded + 1 < ls) {
                expanded += pageSize - (expanded ? 0 : 1);

                console.log("open");

            }
        }
        else {
            if (expanded) {
                if (expanded - ls >= pageSize) {
                    expanded = Math.ceil(ls / pageSize) * pageSize;
                }

                expanded = (expanded >= pageSize) ? expanded - pageSize : 0;
                console.log("close " + expanded);

            }
        }

        auc._sExpanded = expanded;
    };

Answer 1

据我了解，您只是想在单击某些图标时打开和关闭一些文本，对吗？

例如：

<tr ng-repeat-start="item in items">
  <td ng-click="item.moreIsShown = !item.moreIsShown">Show more</td>
</tr>
<tr ng-repeat-end ng-show="item.moreIsShown">
 <td>Some extra data</td>
</tr>

切换可见性您不需要特殊功能，只需内联播放即可。

为了让它工作，我认为你需要设置你希望在你的重复集合中切换的属性。

例如：

angular.forEach($scope.yourCollection, function(item) {
 item.moreIsShown = false;
});

希望我正确理解了您的问题，希望对您有所帮助。