javascript - ionic item-toggle 点击li标签 切换

问题描述

问 题

 <li class="item item-toggle">
                xxxxx
                <label class="toggle toggle-positive">
                    <input ng-model="data.isWord" type="checkbox">
                    <div class="track">
                        <div class="handle"></div>
                    </div>
                </label>
            </li>
                          
                          

想让整个li标签响应事件
谢谢。

修改后的代码
<li class="item " ng-click="clickIsWord()">

        开启office word传输模式
        <label class="toggle toggle-positive">
          <input ng-model="data.isWord" type="checkbox">
          <div class="track">
            <div class="handle"></div>
          </div>
        </label>
      </li>

样子：

我把li 的class item-toggle 去掉是可以点击li了
问题 1 样式 变了。 按钮想要在右边。

2 点击切换按钮 不好用了没有切换动作

谢谢

结果 ：

   <li class="item " ng-click="clickIsWord()">
            开启office word传输模式
            <label class="toggle toggle-positive" style="float: right" >
              <input ng-model="data.isWord"  ng-click="clickIsWord()" type="checkbox">
              <div class="track">
                <div class="handle"></div>
              </div>
            </label>
          </li>

添加 了一个float:right 样式正常了
又对input 添加 了click input也能点击了。

解决方案

核心代码：

    <li ng-click="selectLi()">
        <label class="toggle toggle-positive">
            <input ng-model="isSelect" type="checkbox">
            <div class="track">
                <div class="handle"></div>
            </div>
        </label>
    </li>
    
    
  $scope.isSelect = false;
  $scope.selectLi = function(){
    $scope.isSelect = !$scope.isSelect;
  };
      

这篇关于javascript - ionic item-toggle 点击li标签 切换的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！