使用侧面菜单离子框架内的切换按钮-Java 学习之路

我创建了一个sideMenu，其中一个项目左边有一个文本，右边有一个切换（复选框） . 菜单项链接到视图，该视图包含项目列表 . 切换就像一个按钮，允许用户清除列表，而无需进入视图 .

之前我在菜单项中添加了“菜单关闭”属性，因此每次单击切换时，它都会更改值并关闭侧边菜单 .

现在的问题是，在删除“菜单关闭”后，我可以点击切换菜单并保持打开菜单，但菜单项链接不起作用 . 我尝试过设置ng-click和href . 如果我设置了href，即使我点击切换，该项目也会导航到新视图 .

<ion-item class="item-toggle" ng-click="openNotifications()">
     <i class="icon ion-android-notifications-none"></i>
     Notifications
     <label class="toggle toggle-assertive">
        <input type="checkbox" ng-click="alert('notification on')">
          <div class="track">
              <div class="handle"></div>
          </div>
     </label>
</ion-item>

如何确保如果我点击切换它会发生变化，当我点击项目时它会导航查看？

2 回答

您应该只能将 $event.stopPropagation() 添加到外部单击事件，单击事件传播和冒泡，这就是为什么两者都在触发 .

试试这个：

<ion-item class="item-toggle" ng-click="openNotifications()">
     <i class="icon ion-android-notifications-none"></i>
     Notifications
     <label class="toggle toggle-assertive">
        <input type="checkbox" ng-click="alert('notification on');$event.stopPropagation()">
          <div class="track">
              <div class="handle"></div>
          </div>
     </label>
</ion-item>

固定它：

所以你需要停止prorogation，你还需要将其添加到css以使切换项可单击：

.item-toggle{
  pointer-events:initial !important;
}

这是一个离子游乐场，以显示它的工作！ http://play.ionic.io/app/d9920eee107d

回复于 2024-04-20T20:22:16+08:00

您可以将toogle放在正常的列表项中，以防止使用toogle项目行为 .

<ion-item ng-click="show('click')">
    Item     
    <label class="toggle">
        <input type="checkbox" ng-model="state" ng-change="show(state)">
        <div class="track">
            <div class="handle"></div>
        </div>
    </label>
</ion-item>

回复于 2024-04-20T20:22:16+08:00

使用侧面菜单离子框架内的切换按钮

2 回答

相关问题