Question

情景

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

我有两部分HTML代码，一部分是角度代码中的图标和相关的点击功能。 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>

Angular

    $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;
});

我希望我能正确理解你的问题，希望这会有所帮助。

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

1 个答案: