角度 - 单击flexbox网格单元以展开全宽下面的区域

Question

我有类似日历网格使用flexbox内的离子3项目。

的细胞是一个阵列

<div class="sb-calendar-wrapper"> 
    <div class="sb-calendar-month"> 
     <div class="sb-calendar-row"> 
      <div class="sb-calendar-cell sb-cell-labels sb-week-day" *ngFor="let day of sbcalendar.dayLabels"> 
       {{day}} 
      </div> 
     </div> 
     <div class="sb-calendar-row"> 
      <div class="sb-calendar-cell sb-cell" *ngFor="let day of calendarDays, let j=index" (click)="openCalendarDay(day)" [ngStyle]="{'height': (day.isOpen) ? '300px' : '60px'}">{{j}} 
      </div> 
     </div> 
    </div> 
</div> 

.sb-cell { 
    position: relative; 
    border-bottom: 1px solid rgba(130, 171, 183, 0.2); 
    padding: 5px; 
    height: calc((100vh - 150px)/6); 
    .sb-calendar-day-list{ 
     position: absolute; 
     width: 100vw; 
     left: 0; 
     top:calc((100vh - 150px)/6); 
     background: #ccc; 
     height: calc(300px - calc((100vh - 150px)/6)); 
    } 
} 

当我点击任何一天，我想要的“行”，以展开以显示我可以使用例如区域显示该单元格的项目。

我面临的问题是如何定位该列表元素，这样我会充满整个空间或宽度。与位置：细胞的相对位置，我可以把一切都很好，除了左边：0，它不适用于大多数细胞。

总之，当我点击任何一天，一个填充整个视图宽度的框应该展开。感谢您的任何建议！

EDIT1

我不想在每个n-cell之后创建手动行。单元格数组应保持为单个数组，而flexitem宽度控制每行中有多少个项目。

Answer 1

我想你可以安排在同一行作为行那些日子。 在每一行的末尾，您可以添加ng-if条件的占位符div。 只要您点击该行的某一天，就可以检查显示div的行索引。该div将持有你想要的区域。

HTML：

<div class="flexbox-row" ng-repeat="row in rows track by $index"> 
    <div class="flexbox-col clickable" ng-click="showRow($index)"> 
    1 
    </div> 
    <div class="flexbox-col clickable" ng-click="showRow($index)"> 
    2 
    </div> 
    <div class="flexbox-col clickable" ng-click="showRow($index)"> 
    3... 
    </div> 
    <!-- Place holder div --> 
    <div ng-if="showRow() === $index"> 
    <div data-custom-directive></div> 
    </div> 
</div> 

显示行代码：

scope.showRow = function ($index) { 
    // Return activeRow 
    if ($index === undefined) { 
    return scope.activeRow; 
    } 
    // Hide if same row 
    if ($index === scope.activeFlight) { 
    scope.activeRow = null; 
    return; 
    } 
    // Show row 
    scope.activeRow = parseInt($index); 
};