Angular.js 移动Web应用 - 购物单/任务列表

Ionic.js Shopping/Task List Mobile Web

《three.js使用多个渐变torus模拟光环光晕》申请公开！

第三方库
作品简介 2564
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

HTML

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
    <title>Toggles</title>
    <link href="/uploads/150101/ionic.css" rel="stylesheet">
    <script src="/uploads/150101/ionic.bundle.js"></script>
</head>

<body ng-controller="TodoCtrl" animation="slide-left-right-ios7">
    
    <ion-header-bar class="bar-assertive">
        <h1 class="title">foodQ</h1>
    </ion-header-bar>
    <ion-content ion-content has-header has-footer>
        
        <ion-list>
            <ion-item ng-repeat="todo in todos track by $index" class="item item-checkbox item-button-right">
                <label class="checkbox">
                    <input type="checkbox" ng-model="todo.done">
                </label>
                {{todo.text}}
                <button class="button button-clear trash" ng-click="archive()">
                    <i class="icon ion-android-trash"></i>
                </button>
            </ion-item>
        </ion-list>
    </ion-content>

<form name="myForm" data-ng-submit="addTodo()">
        <ion-footer-bar class="bar bar-footer item-input-inset">
            <label class="item-input-wrapper">
                <input name="myText" class="itemAdd" type="text" placeholder="Add Item" ng-model="todoText" ng-minlength="1" required>
            </label>
            <button ng-disabled="myForm.$invalid" class="button button-clear add">Add</button>
        </ion-footer-bar>
    </form>
    
    <script>
        // Ionic Starter App

// angular.module is a global place for creating, registering and retrieving Angular modules
        // 'starter' is the name of this angular module example (also set in a <body> attribute in index.html)
        // the 2nd parameter is an array of 'requires'
        // 'starter.services' is found in services.js
        // 'starter.controllers' is found in controllers.js
        angular.module('starter', ['ionic', 'starter.controllers', 'starter.services'])
            .run(function($ionicPlatform) {
                $ionicPlatform.ready(function() {
                    // Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
                    // for form inputs)
                    if (window.cordova && window.cordova.plugins.Keyboard) {
                        cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
                    }
                    if (window.StatusBar) {
                        // org.apache.cordova.statusbar required
                        StatusBar.styleDefault();
                    }
                });
            })

.config(function($stateProvider, $urlRouterProvider) {
            // Ionic uses AngularUI Router which uses the concept of states
            // Learn more here: https://github.com/angular-ui/ui-router
            // Set up the various states which the app can be in.
            // Each state's controller can be found in controllers.js
        });
    </script>
    <script>
        angular.module('starter.controllers', [])
    </script>
    <script>
        angular.module('starter.services', [])
        angular.module('starter', ['ionic'])
            .controller('TodoCtrl', function($scope, $ionicModal, $ionicPopup) {
                $scope.saved = localStorage.getItem('grocery-bear0064');
                $scope.todos = (localStorage.getItem('grocery-bear0064') !== null) ? JSON.parse($scope.saved) : [{
                    text: 'DrumSticks',
                    done: false
                }, {
                    text: 'CornBread',
                    done: false
                }, {
                    text: 'Peach Schnapps',
                    done: false
                }, {
                    text: 'Carrots',
                    done: false
                }];
                localStorage.setItem('grocery-bear0064', JSON.stringify($scope.todos));

$scope.addTodo = function() {
                    $scope.todos.push({
                        text: $scope.todoText,
                        done: false
                    });
                    $scope.todoText = ''; //clear the input after adding
                    localStorage.setItem('grocery-bear0064', JSON.stringify($scope.todos));
                };

/*Delete Funtion*/
                $scope.archive = function() {

var latch = false;
                        var oldTodos = $scope.todos;

angular.forEach(oldTodos, function(todo) {
                            if (todo.done) {
                                latch = true;
                                //alert("latch open");
                            }
                        });

//alert($scope.todos.length);
                        if (latch) {
                            var confirmPopup = $ionicPopup.confirm({
                                title: 'Delete',
                                template: 'Are you sure?'
                            });
                            confirmPopup.then(function(res) {
                                if (res) {
                                    $scope.todos = [];

angular.forEach(oldTodos, function(todo) {
                                        if (!todo.done)
                                            $scope.todos.push(todo);
                                    });
                                    localStorage.setItem('grocery-bear0064', JSON.stringify($scope.todos));
                                } else {

}
                            });
                        } else {
                            var alertPopup = $ionicPopup.alert({
                                title: 'Nothing Selected!',
                                template: 'Please select an item.'
                            });
                            alertPopup.then(function(res) {});
                        }
                    }
                    /*end Delete*/
            });
    </script>
</body>

</html>

Ionic.js Shopping/Task List Mobile Web

编辑器支持Emmet

快捷键

Ionic.js Shopping/Task List Mobile Web

A-Frame WebVR框架应用程序代码实例：基础模型、skybox和动画

如何使用three.js Phenomenon插件来创建基于webgl的页面滚动平滑过渡特效

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：