2017-10-17 63 views
0

場景如何使用角度打開頁面時展開摺疊?

我試圖讓崩潰在頁面啓動時展開。

我有2個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> 

$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; 
    }; 
+0

您可能需要顯示代碼的[最小示例](https://stackoverflow.com/help/mcve)。也不清楚變量「a」是什麼。否則,您只需在頁面重新加載時將'a._sExpanded'設置爲** true **。 –

+0

今天晚些時候我會把它更新成plunker ..謝謝回覆! – Fenici

+0

和btw auc._sExpanded = a._sExpanded我必須改變它的一個單獨的對象屬性,在我的情況下,而不是控制器實例屬性 – Fenici

回答

0

據我瞭解,你Ĵ當你點擊一些圖標時,你想打開和關閉一些文本,對吧?

如:

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

我希望我理解正確你的問題,我希望這有助於。

+0

。不會是這麼容易的大聲笑 – Fenici