且构网

分享程序员开发的那些事...
且构网 - 分享程序员编程开发的那些事

如何在使用角度打开页面时展开折叠?

更新时间:2023-12-02 18:38:22

据我所知,您只需打开并关闭点击一些图标时的一些文字,对吗?



例如:

 < tr ng-repeat-start =项目中的项目> 
< td ng-click =item.moreIsShown =!item.moreIsShown>显示更多< / td>
< / tr>
< tr ng-repeat-end ng-show =item.moreIsShown>
< td>一些额外资料< / td>
< / tr>

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



为了使它工作,我认为你需要设置你想在你的重复收集中切换的属性。



例如:

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

我希望我能正确理解您的问题,并希望这有助于您。


Scenario

I am trying to make the collapse expand open when page started.

I have 2 part of HTML code, one is icons and related click function in the angular code. the second part of HTML is the data part showing the data after the click.

and the expand function allows an opening switch between more or less.

question is how do make it stay open when the page is loaded it. ? I tried the number of ways to do it, but it stays collapse. \

please make some suggestion , what is wrong is with the method.

Code

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 data

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

As I understand, You just want to open and close some text when clicking on some icons, right ?

Eg:

<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>

To toggle visibility You do not need a special function, just play it in inline.

To make it work, I think you need to set the attribute You wish to toggle in your repeated collection.

Eg:

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

I hope that I understood your question correctly and I hope this helps.