【2016.09.05】【Ionic侧滑菜单和Item结合的使用】

最新推荐文章于 2024-09-26 01:42:12 发布
chengji4739
最新推荐文章于 2024-09-26 01:42:12 发布
阅读量118
点赞数
文章标签： javascript ViewUI
原文链接：https://my.oschina.net/YongfengHe/blog/742410
版权
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Todo</title>
  <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">

  <link href="lib/ionic/css/ionic.css" rel="stylesheet">

  <script src="lib/ionic/js/ionic.bundle.js"></script>
  <script src="js/app.js"></script>

  <!-- 在使用 Cordova/PhoneGap 创建的 APP 中包含的文件，由 Cordova/PhoneGap 提供，(开发过程中显示 404) -->
  <script src="cordova.js"></script>
  <script>
    var app = angular.module("myApp",["ionic"]);

    app.factory("myService",function () {
      return {
        //存储为本地数据
        save:function (data) {
          window.localStorage['data'] = angular.toJson(data);
        },
        //获取本地数据
        load:function () {
          var localData = window.localStorage['data'];
          if(localData) {
            return angular.fromJson(localData);
          }
          return [];
        },
        //设置当前位置
        setcurrposition:function (index) {
          window.localStorage['currentposition'] = index;
        },
        //获取当前位置
        getcurrposition:function () {
          return parseInt(window.localStorage['currentposition']) || 0;
        }
      }
    });

    app.controller("myCtrl01",["$scope","$ionicModal","$ionicSideMenuDelegate","myService",function ($scope,$ionicModal,$ionicSideMenuDelegate,myService) {
      $scope.name='朱明宇';

      //记录当前点击的位置的
      $scope.currentposition = myService.getcurrposition(),

        $scope.data = myService.load();

      // 创建并载入模型
      $ionicModal.fromTemplateUrl('new-task.html', function(modal) {
        $scope.taskModal = modal;
      }, {
        scope: $scope,
        animation: 'slide-in-up'
      });

      // 表单提交时调用
      $scope.createTask = function(task) {
        if (task.title){
          $scope.data[$scope.currentposition].content.push({
            content: task.title
          });

          //表单提交的时候就更新本地存储的数据
          myService.save($scope.data);

          $scope.taskModal.hide();
          task.title = "";
        }
      };

      // 打开新增的模型
      $scope.newTask = function() {
        $scope.taskModal.show();
      };

      // 关闭新增的模型
      $scope.closeNewTask = function() {
        $scope.taskModal.hide();
      };


      //显示侧滑菜单的操作
      $scope.toggleProjects=function () {
        $ionicSideMenuDelegate.toggleLeft();
      }

      //侧边栏的+按钮的响应事件
      $scope.addLeftMenu=function () {
        var inputContent = prompt("请输入内容：");
        //如果输入的内容不是空的
        if (inputContent){
          console.log(inputContent);
          $scope.data.push({
            leftTitle:inputContent,
            content:[]
          });
        }
      }
      //点击侧边栏的item事件
      $scope.clickItemMenu = function (index) {
        console.log("您点击了第【"+index+"】行菜单");
        //显示这个菜单栏的内容
        $scope.currentposition=index;
        //存储当前位置
        myService.setcurrposition(index);

        //关闭侧滑
        $ionicSideMenuDelegate.toggleLeft(false);
      }

      //删除某一行的值
      $scope.deleteRow=function (index) {
        console.log("删除第【"+index+"】行内容");
        $scope.data[$scope.currentposition].content.splice(index,1);
        //更新数据
        myService.save($scope.data);
      }

      //显示内容item的详情
      $scope.showItenDetail = function (content) {
        alert(content);
      }

      $scope.longClick = function () {
        alert("您长按了");
      }
    }]);
  </script>

</head>
<body ng-app="myApp" ng-controller="myCtrl01">
<ion-side-menus>
  <ion-side-menu-content>
    <ion-header-bar class="bar-positive">
      <!--新增一个toggleButton用来打开关闭侧滑栏的-->
    <button class="button button-icon" ng-click="toggleProjects()">
    <i class="icon ion-navicon"></i>
    </button>

      <h1 class="title">{{data[currentposition].leftTitle}}</h1>
      <!-- 新增按钮-->
      <button class="button button-icon" ng-click="newTask()">
        <i class="icon ion-compose"></i>
      </button>
    </ion-header-bar>

    <ion-content scroll="false">
      <ion-list>
        <ion-item ng-repeat="x in data[currentposition].content" ng-click="showItenDetail(data[currentposition].content[$index].content)"
        on-hold="longClick()">
          {{x.content}}
          <button style="background: none;border-color: transparent;position: absolute;right: 10px;"ng-click="deleteRow($index)">
            <i class="icon ion-ios-close-outline"></i>
          </button>
        </ion-item>
      </ion-list>
    </ion-content>
  </ion-side-menu-content>


  <!--左侧菜单栏-->
  <ion-side-menu side="left">
    <ion-header-bar class="bar-assertive">
      <h1 class="title">侧边栏</h1>
      <button class="button button-icon ion-plus" ng-click="addLeftMenu()"></button>
    </ion-header-bar>

    <ion-content scroll="false">
      <ion-list>
        <ion-item ng-repeat="x in data" ng-click="clickItemMenu($index)" ng-class="{active: x.leftTitle == data[currentposition].leftTitle}">
          {{x.leftTitle}}
        </ion-item>
      </ion-list>
    </ion-content>
  </ion-side-menu>
</ion-side-menus>

<script id="new-task.html" type="text/ng-template">

  <div class="modal">

    <!-- Modal header bar -->
    <ion-header-bar class="bar-secondary">
      <h1 class="title">添加内容</h1>
      <button class="button button-clear button-positive" ng-click="closeNewTask()">取消</button>
    </ion-header-bar>

    <!-- Modal content area -->
    <ion-content scroll="false">

      <form ng-submit="createTask(data)">
        <div class="list">
          <label class="item item-input">
            <input type="text" placeholder="What do you need to do?" ng-model="data.title">
          </label>
        </div>
        <div class="padding">
          <button type="submit" class="button button-block button-positive">确定</button>
          <button class="button button-block button-assertive">你 好</button>
          <button class="button button-outline button-assertive icon-right ion-gear-a button-small">setting</button>
        </div>
      </form>

    </ion-content>

  </div>

</script>


</body>
</html>