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

最新推荐文章于 2019-08-24 16:31:05 发布

sam0535

最新推荐文章于 2019-08-24 16:31:05 发布

阅读量944

点赞数

分类专栏： ionic html5

ionic 同时被 2 个专栏收录

5 篇文章 0 订阅

订阅专栏

html5

4 篇文章 0 订阅

订阅专栏

<!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;
                    }
                }
            }
        });

    });

这里写图片描述

sam0535

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Ionic实现左侧侧边栏新建项目

html lang="en">head> meta charset="UTF-8"> title>Titletitle> link href="lib/ionic/css/ionic.css" rel="stylesheet"> script src="lib/ionic/js/ionic.bundle.js">script> script src="j
复制链接

扫一扫

专栏目录