Ionic实现左侧侧边栏新建项目

来源：互联网发布：淘宝会员注册网站编辑：程序博客网时间：2024/05/23 11:56

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <link href="lib/ionic/css/ionic.css" rel="stylesheet">    <script src="lib/ionic/js/ionic.bundle.js"></script>    <script src="js/app2.js"></script>    <script type="text/javascript" src="cordova.js"></script></head><body ng-app="todo" ng-controller="TodoCtrl"><ion-side-menus>    <ion-side-menu-content>        <ion-header-bar class="bar-dark">            <button class="button button-icon" ng-click="toggleProjects()">                <i class="icon ion-navicon"></i>            </button>            <h1 class="title">{{activeProject.title}}</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="task in activeProject.tasks">                    {{task.title}}                </ion-item>            </ion-list>        </ion-content>    </ion-side-menu-content>    <!-- 左边栏 -->    <ion-side-menu side="left">        <ion-header-bar class="bar-dark">            <h1 class="title">Projects</h1>            <button class="button button-icon ion-plus" ng-click="newProject()">            </button>        </ion-header-bar>        <ion-content scroll="false">            <ion-list>                <ion-item ng-repeat="project in projects" ng-click="selectProject(project, $index)" ng-class="{active: activeProject == project}">                    {{project.title}}                </ion-item>            </ion-list>        </ion-content>    </ion-side-menu></ion-side-menus><script id="new-task" type="text/ng-template">    <div class="modal">        <ion-header-bar class="bar-secondary">            <h1 class="title">新建事务</h1>            <button class="button button-clear button-positive" ng-click="closeNewTask()">关闭</button>        </ion-header-bar>        <ion-content>            <form ng-submit="createTask(task)">                <div class="list">                    <label class="item item-input">                        <input type="text" placeholder="请填写代办事项" ng-model="task.title">                    </label>                </div>                <div class="padding">                    <button type="submit" class="button button-block button-positive">新建事务</button>                </div>            </form>        </ion-content>    </div></script></body></html>

app2.js

/** * Created by lin on 2016/9/16. */angular.module('todo', ['ionic'])/** * The Projects factory handles saving and loading projects * from local storage, and also lets us save and load the * last active project index. */    .factory('Projects', function() {        return {            all: function() {                var projectString = window.localStorage['projects'];                if(projectString) {                    return angular.fromJson(projectString);                }                return [];            },            save: function(projects) {                window.localStorage['projects'] = angular.toJson(projects);            },            newProject: function(projectTitle) {                // Add a new project                return {                    title: projectTitle,                    tasks: []                };            },            getLastActiveIndex: function() {                return parseInt(window.localStorage['lastActiveProject']) || 0;            },            setLastActiveIndex: function(index) {                window.localStorage['lastActiveProject'] = index;            }        }    })    .controller('TodoCtrl', function($scope, $timeout, $ionicModal, Projects, $ionicSideMenuDelegate) {        // A utility function for creating a new project        // with the given projectTitle        var createProject;        createProject = function (projectTitle) {            var newProject = Projects.newProject(projectTitle);            $scope.projects.push(newProject);            Projects.save($scope.projects);            $scope.selectProject(newProject, $scope.projects.length - 1);        };        // Load or initialize projects        $scope.projects = Projects.all();        // Grab the last active, or the first project        $scope.activeProject = $scope.projects[Projects.getLastActiveIndex()];        // Called to create a new project        $scope.newProject = function() {            var projectTitle = prompt('Project name');            if(projectTitle) {                createProject(projectTitle);            }        };        // Called to select the given project        $scope.selectProject = function(project, index) {            $scope.activeProject = project;            Projects.setLastActiveIndex(index);            $ionicSideMenuDelegate.toggleLeft(false);        };        // Create our modal        $ionicModal.fromTemplateUrl('new-task', function(modal) {            $scope.taskModal = modal;        }, {            scope: $scope        });        $scope.createTask = function(task) {            if(!$scope.activeProject || !task) {                return;            }            $scope.activeProject.tasks.push({                title: task.title            });            $scope.taskModal.hide();            // Inefficient, but save all the projects            Projects.save($scope.projects);            task.title = "";        };        $scope.newTask = function() {            $scope.taskModal.show();        };        $scope.closeNewTask = function() {            $scope.taskModal.hide();        }        $scope.toggleProjects = function() {            $ionicSideMenuDelegate.toggleLeft();        };        $timeout(function() {            if($scope.projects.length == 0) {                while(true) {                    var projectTitle = prompt('Your first project title:');                    if(projectTitle) {                        createProject(projectTitle);                        break;                    }                }            }        });    });

这里写图片描述

阅读全文

0 0