AngularJS 很好的待定任务管理应用

AngularJS todo app using Jade and Less

todo

《aframe.js 3d拼图代码详解》作品已被踏得网收录！

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

HTML
CSS
JavaScript
Result

编译

JavaScript

//this code is a fork from http://codepen.io/davidnknight/pen/svFDe
// and http://codepen.io/brakmic/pen/JBCpt

//it follows the AngularJS Style Guide from John Papa (@John_Papa)
//https://github.com/johnpapa/angularjs-styleguide#angularjs-style-guide

var App = angular.module('App', []);

//using named functions instead of anonymous ones
//very helpful when debugging code
//https://github.com/johnpapa/angularjs-styleguide#controllers
App.controller('TasksCtrl', Tasks);

function Tasks() {
    //controllerAs with vm ("view model")
    //https://github.com/johnpapa/angularjs-styleguide#controllers
    var vm = this;

vm.newTask = '';

//bindable members up top (https://github.com/johnpapa/angularjs-styleguide#controllers)
    vm.add = add;
    vm.markAsComplete = markAsComplete;
    vm.markAsIncomplete = markAsIncomplete;
    vm.getTotalTasks = getTotalTasks;
    vm.calculatePercent = calculatePercent;

vm.tasks = [
        'Feed the imaginary gold fish.',
        'Walk the non existant dog.',
        'Have a celebratory beer!'
    ];

vm.completedTasks = [
        'Start writing an example AngularJS todo app.',
        'Add the ability to add new tasks.',
        'Add the ability to mark tasks as completed.',
        'Add the ability to undo completed tasks.',
        'Finish writing an example AngularJS todo app.',
        'Write my first CodePen.'
    ];

function add(task) {
        if (task === '' || typeof task === 'undefined') {
            return false;
        }

vm.tasks.push(task);
        vm.newTask = '';
    }

function markAsComplete(index) {
        var task = vm.tasks[index];
        vm.tasks.splice(index, 1);
        vm.completedTasks.push(task);
    }

function markAsIncomplete(index) {
        var task = vm.completedTasks[index];
        vm.completedTasks.splice(index, 1);
        vm.tasks.push(task);
    }

function getTotalTasks() {
        return vm.tasks.length + vm.completedTasks.length;
    }

function calculatePercent(count) {
        var total = vm.getTotalTasks();
        return Math.round(100 / total * count);
    }

}

编译

CSS

body {
    padding: 50px 0 30px;
}
h1,
h2 {
    font-size: 18px;
    margin: 0 0 20px;
    padding-bottom: 13px;
    position: relative;
}
h1:after,
h2:after {
    bottom: 0;
    content: '';
    display: block;
    height: 2px;
    left: 0;
    position: absolute;
    width: 25px;
}
h1.text-center:after,
h2.text-center:after {
    left: 50%;
}
h1 {
    margin: 0 0 40px;
}
ul {
    list-style: none;
    margin: 0 0 20px;
    padding: 0;
}
.task-list {
    margin-bottom: 45px;
}
.task,
.completed-task {
    position: relative;
}
.task a,
.completed-task a {
    bottom: 0;
    display: block;
    position: absolute;
    right: 0;
    text-align: center;
    top: 0;
    width: 40px;
}
.task a:hover,
.completed-task a:hover {
    cursor: pointer;
}
.task a i,
.completed-task a i {
    height: 20px;
    line-height: 20px;
    margin-top: -10px;
    position: absolute;
    right: 10px;
    top: 50%;
    width: 20px;
}
.task {
    border-radius: ;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.1);
    margin: 0 0 5px;
    padding: 10px 55px 10px 15px;
}
.completed-task {
    color: #999;
    font-size: 13px;
    text-decoration: line-through;
}
.completed-task a {
    color: #ddd;
}
.completed-task a:hover {
    color: #d6563a;
}

HTML

{{ task }}<a ng-click="vm.markAsComplete($index)"><i class="fa fa-check"></i></a>
                </li>
            </ul>
            <form ng-submit="vm.add(vm.newTask)">
                <div class="form-group">
                    <input ng-model="vm.newTask" type="text" placeholder="Type new task and hit enter" class="form-control" />
                </div>
            </form>
        </div>
        <div class="task-list">
            <h2>Completed<small>&mdash; {{ vm.completedTasks.length }} / {{ vm.getTotalTasks() }} ({{ vm.calculatePercent(vm.completedTasks.length) }}%)</small></h2>
            <ul>
                <li ng-repeat="task in vm.completedTasks" class="completed-task">{{ task }}<a ng-click="vm.markAsIncomplete($index)"><i class="fa fa-undo"></i></a>
                </li>
            </ul>
        </div>
    </div>
</div>
<script src='//cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.20/angular.min.js'></script>
<script src='//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.11.2.min.js'></script>

AngularJS todo app using Jade and Less

todo

编辑器支持Emmet

快捷键

AngularJS todo app using Jade and Less

todo

一款很棒的工作安排（待办事项）清单应用模板

基于React.js实现游戏风格的待办任务列表

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：