Ios 在ionic for mobile应用程序中创建嵌套列表

我正在开发移动应用程序。我想创建一个嵌套列表。有人能帮我吗。例如，我第一页的清单是：食品、饮料。点击食物，我想显示L1、L2、L3等

---

我怎样才能做到这一点呢？

不确定这是否是推荐的方法，但这对我来说很有效

        <ion-list>
            <ion-item nav-clear menu-close ng-click="toggleSubmenu()">Menu 1</ion-item>
            <ion-item nav-clear menu-close ng-show="submenu">
                <ion-list>
                    <ion-item nav-clear menu-close>Submenu 1</ion-item>
                    <ion-item nav-clear menu-close>Submenu 2</ion-item>
                    <ion-item nav-clear menu-close>Submenu 3</ion-item>
                </ion-list>
            </ion-item>
            <ion-item nav-clear menu-close>Menu 2</ion-item>
            <ion-item nav-clear menu-close>Menu 3</ion-item>
            <ion-item nav-clear menu-close>Menu 4</ion-item>
        </ion-list>

菜单1
子菜单1
子菜单2
子菜单3
菜单2
菜单3
菜单4

您可以使用说明所描述的导航的。这是一个来自同一来源的运行示例：

此行为通过以下方式实现，并已包括在其中：

---

我不知道这段代码是谁写的，但它真的很好地解决了你们的问题

angular.module（'ionicApp'，['ionic']））
.controller（'MyCtrl'，函数（$scope）{
$scope.groups=[]；
对于（var i=0；我希望这会起作用

HTML代码

<ion-item  ng-click="showSubMenu()">
    Show Submenu            
    <div ng-if="isShowSubMenu">
        <ion-item menu-close  href="#/app/one">
            Submenu Menu One
        </ion-item>
        <ion-item menu-close href="#/app/two">
            Submenu Menu Two
        </ion-item>
        <ion-item menu-close href="#/app/three">
            Submenu Menu Three
        </ion-item>
    </div>
</ion-item>

.controller('FirstCtrl', function($scope){
    $scope.pageLable='One';
})

.controller('SecondCtrl', function($scope){
    $scope.pageLable='Two';
})

.controller('ThirdCtrl', function($scope){
    $scope.pageLable='Three';
}) 

在app.js中写下下面的代码

.config(function($stateProvider, $urlRouterProvider) {
  $stateProvider
    //// ===========  New Start
    .state('app.one', {
        url: '/one',
        views: {
            'menuContent': {
                templateUrl: 'templates/1Menu.html',
                controller: 'FirstCtrl'
            }
        }
    })
    .state('app.two', {
        url: '/two',
        views: {
            'menuContent': {
                templateUrl: 'templates/2Menu.html',
                controller: 'SecondCtrl'
            }
        }
    })

    .state('app.three', {
        url: '/three',
        views: {
            'menuContent': {
                templateUrl: 'templates/3Menu.html',
                controller: 'ThirdCtrl'
            }
        }
    })
});

在
controller.js
文件中创建控制器

<ion-item  ng-click="showSubMenu()">
    Show Submenu            
    <div ng-if="isShowSubMenu">
        <ion-item menu-close  href="#/app/one">
            Submenu Menu One
        </ion-item>
        <ion-item menu-close href="#/app/two">
            Submenu Menu Two
        </ion-item>
        <ion-item menu-close href="#/app/three">
            Submenu Menu Three
        </ion-item>
    </div>
</ion-item>

.controller('FirstCtrl', function($scope){
    $scope.pageLable='One';
})

.controller('SecondCtrl', function($scope){
    $scope.pageLable='Two';
})

.controller('ThirdCtrl', function($scope){
    $scope.pageLable='Three';
}) 

HTML页面1菜单HTML

<ion-view view-title="One">
  <ion-content>
    <h1>{{pageLable}}</h1>
  </ion-content>
</ion-view>


{{pageLable}}