javascript - 第二次点击时 ionic 应用程序运行功能

Question

我正在尝试在我的 ionic 应用程序中创建一个具有以下行为的菜单。

1. 点击一次即可显示该菜单项的说明。
2. 再次点击可导航到该页面或运行指定的功能。

我确实在模板中硬编码了整个菜单，但是我认为拥有一个包含菜单项的对象会更好。这给我带来了主要的障碍，即如何在对象中包含函数。

或者

我是否以完全错误的方式解决这个问题，在这种情况下，我们将非常感谢您的建议。

示例代码是:

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

.controller('AppCtrl', function($scope, $state) {

  $scope.menuItems = [{
      "title": "Create a Programe",
      "icon": "ion-compose",
    "description" : "Search and add exercises to your prgoramme before sending to your patient"
/*      "action": "openCreateFullProgrammeModal()"
      "action": $state.go('app/clients')
      "action": $state.go('app/programmes')*/
    }, {
      "title": "My Clients",
      "icon": "ion-android-people",
      "description" : "view all your clients"
/*      "action": "openCreateFullProgrammeModal()"
      "action": $state.go('app/clients')
      "action": $state.go('app/programmes')*/
    }, {
      "title": "Programmes",
      "icon": "ion-clipboard",
      "description" : "Browse your programe library"
/*      "action": "openCreateFullProgrammeModal()"
      "action": $state.go('app/clients')
      "action": $state.go('app/programmes')*/
    }

  ]

});

模板:

  <div class="descriptionArea">
      <p>testing</p>

    </div>
    <div class="home-bottom">
      <div ng-repeat="item in menuItems">
        <ion-item class="item-icon-left home-links" href="#" ng-click="openCreateFullProgrammeModal()">
          <i ng-class="item.icon" class="icon home-link-icon"></i> {{item.title}}
          <i class="icon ion-android-arrow-forward home-icon-right"></i>
        </ion-item>
      </div>

    </div>

可以找到 codepen here

非常感谢。

编辑

This这就是我最终所做的...

Answer 1

首先，您对菜单进行硬编码的方法并不实用，您应该使用ng-repeat。

这里的第二个是用于点击功能的代码笔，我做了一个示例来向您展示如何制作它，您可以扩展它并实现 go 功能。

here is the codepin