如何在使用角度打开页面时展开折叠？ [英] How to expand the collapse when open the page using angular ?

问题描述

场景

我试图在页面启动时使折叠展开。

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

和扩展功能允许或多或少的打开开关。

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

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

代码

HTML

 < td uib-tooltip = {{aslength}} stooltip-enable =aslength> 1tooltip-append-to-body =truetooltip-placement =left> 
< span class =auc-table__s-moreless-place> 
< span class =glyphicon glyphicon-plus pointeraria-hidden =trueng-if =a._sExpanded + 1aslengthng-click =expandCollapses（a，true） uib-tooltip =显示更多tooltip-append-to-body =true>< / span> 
< / span> 
< span class =auc-table__s-moreless-place> 
 < / span> 
< / td> 
  

HTML数据

 < tr ng-if =a._sExpandedng-repeat =b in asslice（1，a._sExpanded + 1）> 
< td>< / td> 
< td>< / td> 
< td>< / td> 
< td>< / td> 
< td>< / td> 
< td> {{bcv（'公司'，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> 
  < / 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）; 
 
 
 $ b 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; 
}; 
  

解决方案

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

例如：

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

这篇关于如何在使用角度打开页面时展开折叠？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！