Question

DECLARE @BookingId INT = 1;
DECLARE @RequiredQty INT = 2;
DECLARE @Hours INT = 7;

CREATE TABLE #T
(
    BookingId  INT,
    DiscountId INT,
    Quantity   INT
)

;WITH CTE([Count],[Quantity],Rk) AS  
(
    SELECT
           CASE 
                WHEN [HOURS] - @RequiredQty > @RequiredQty THEN @RequiredQty
                ELSE [HOURS] - @RequiredQty
           END ,
           T.HOURS,1
    FROM
    (
        SELECT @Hours [HOURS]
    ) AS T
    UNION ALL
    SELECT CASE  
                WHEN CTE.[Quantity] - @RequiredQty > @RequiredQty THEN @RequiredQty
                ELSE CTE.[Quantity] - @RequiredQty
           END AS [Count],
           CTE.[Quantity] - @RequiredQty, 
           RK + 1
    FROM CTE
    WHERE CTE.[Quantity] - @RequiredQty > 0
)

INSERT INTO #T(BookingId,DiscountId,Quantity)
SELECT @BookingId,Rk,[Count] FROM CTE
option (maxrecursion 0)

select * from #T

rootPage: any = DashboardPage;
  pages: Array<{ title: string, component: any, icon: any, color: any, iconcolor: any }>;
 this.pages = [
        { title: 'Dashboard', component: DashboardPage, icon: "md-stats", color: "", iconcolor: "primary" },
        { title: 'Branches', component: BranchPage, icon: "md-home", color: "", iconcolor: "" },
        { title: 'Staff', component: DoctorPage, icon: "md-medkit", color: "", iconcolor: "" },
        { title: 'Patients', component: ViewrecordsPage, icon: "md-clipboard", color: "", iconcolor: "" },
        { title: 'Expenses', component: AdmineexpensesPage, icon: "md-cash", color: "", iconcolor: "" },
        { title: 'Appointments', component: AdmineappointmentsPage, icon: "md-list-box", color: "", iconcolor: "" },
        { title: 'Transactions', component: TransactionsPage, icon: "md-swap", color: "", iconcolor: "" },
        { title: 'Doctors History', component: AdmindoctorsPage, icon: "ios-medical", color: "", iconcolor: "" },
        { title: 'Promotional SMS', component: PromotionalSmsPage, icon: "ios-medical", color: "", iconcolor: "" }
      ];

我正在开发ionic2项目。我已经创建了一个不使用tab的一些项目的侧面菜单。但是现在我需要为sidemenu创建子项目。这是我的代码：如何在不使用ionic2中的side-menu-content选项卡的情况下将子项实现到sidemenu？

Answer 1

您可以使用CSS属性和角度条件为主菜单创建子菜单。单击主菜单时，子菜单将显示（使用角度条件）和一些填充（使用css属性）。 PFB示例代码。 working version

app.html

<ion-menu [content]="mycontent">
  <ion-content>
    <ion-list id="sidenav">
      <ion-item (click)="menuItemHandler()">Main Menu</ion-item>
  <ion-item-group submenu [class.visible]="showSubmenu">
    <ion-item submenu-item>Sub menu item</ion-item>
    <ion-item submenu-item>Sub menu item</ion-item>
    <ion-item submenu-item>Sub menu item</ion-item>
  </ion-item-group>
    </ion-list>
  </ion-content>
</ion-menu>

<ion-nav #mycontent [root]="rootPage"></ion-nav>

app.component.ts

showSubmenu: boolean = false;

menuItemHandler(): void {
  this.showSubmenu = !this.showSubmenu;
}

app.scss

#sidenav {
  ion-item-group[submenu] {
    overflow: hidden;
    display: block;
    height: 0;
    transition: height .3s linear;
    padding-left: 20%;
    &.visible {
        height: inherit;
        // this is just sample value, calculate how much space you need for your menu items
    }
  }
}

如何在ionic2中的sidemenu中添加子项？

1 个答案: