离子中的可点击切换解决方案，或更好的UI元素

Question

我有一些等级类别。 E.g：

• 成人（开/关）
• 赌博（开/关）
• 社交（开/关）
  • Facebook（开/关）
  • Instagram（开/关）
  • Kik（开/关）

对于没有子类别的类别，我希望进行简单的切换。但是，对于子类别，我希望能够开启/关闭整个类别，或点击它并打开和关闭各个网站。

我在这里有一个codepen，它具有直观的外观：http://codepen.io/anon/pen/aOZjmx

JS

angular.module('ionicApp', ['ionic'])

.controller('MyCtrl', function($scope) {

  $scope.items = [
    { 
      id: 0,
      drillDown: true
    },
    { 
      id: 1,
      drillDown: false },
    { 
      id: 2,
      drillDown: false },
  ];
});

HTML

     <ion-list>
        <ion-toggle ng-repeat="item in items">
          Item {{ item.id }}
          <i ng-hide="{{!item.drillDown}}" class="ion-chevron-right"></i>
        </ion-item>
      </ion-list>

问题是，只要你做了离子切换的东西，只有切换字形变得可点击。因此，我对如何使整行可以点击（我可以导航到子屏幕）或不同的UI元素以实现相同的解决方案感兴趣。

Answer 1

如果我理解正确的话，你会尝试连接一个事件处理程序来点击你的toggle和ion-item。这可以通过在两个控件上设置ng-clicks来轻松完成。然而，头部的疼痛是事件冒泡。

由于离子切换基本上位于离子项内，因此单击离子切换将调用切换按钮以及项目。为了防止它，你必须停止事件传播。

现在，更新的HTML将如下所示：

<ion-content>

    <!-- The list directive is great, but be sure to also checkout the collection repeat directive when scrolling through large lists -->

    <ion-list>
        <ion-item ng-repeat="item in items" ng-click="callClick()">
            <ion-toggle ng-model="item.drillDown" ng-click="toggleClick($event)">
                Item {{ item.id }}
                <i ng-hide="{{!item.drillDown}}" class="ion-chevron-right"></i>
        </ion-item>
    </ion-list>
</ion-content>

在JS代码中：

$scope.toggleClick = function($event) {
    alert("toggle click");
    $event.stopImmediatePropagation();
};

$scope.callClick = function() {
    alert("i was clicked");
};