使用angular完成TodoMVC的例子(1)

最新推荐文章于 2023-10-10 17:05:11 发布

python基础教程

最新推荐文章于 2023-10-10 17:05:11 发布

阅读量1.3k

点赞数

分类专栏：流行框架node

本文链接：https://blog.csdn.net/stopcpp/article/details/56484704

版权

流行框架node 专栏收录该内容

24 篇文章 0 订阅

订阅专栏

查看例子前请到todomvc的github上下载模版，并npm install下载所依赖的包。

index.html

<!doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>使用angular完成TodoMVC的例子</title>
        <link rel="stylesheet" href="node_modules/todomvc-app-css/index.css">
        <!-- CSS overrides - remove if you don't need it -->
        <link rel="stylesheet" href="css/app.css">
    </head>
    <body ng-app="MyTodoMvc">
        <section class="todoapp" ng-controller="MainController">
            <header class="header">
                <h1>todos</h1>
                <form ng-submit="add()">
                    <input class="new-todo" placeholder="What needs to be done?" ng-model="text" autofocus>
                </form>

            </header>
            <!-- This section should be hidden by default and shown when there are todos -->
            <section class="main">
                <input class="toggle-all" type="checkbox" ng-click="toggleAll()">
                <label for="toggle-all">Mark all as complete</label>
                <ul class="todo-list">
                    <li ng-repeat="todo in todos" ng-class="{completed:todo.completed,editing:todo.id === currentEditingId}" data-id="{{todo.id}}">
                        <div class="view">
                            <input class="toggle" type="checkbox" ng-model="todo.completed">
                            <label ng-dblclick="editing(todo.id)">{{todo.text}}</label>
                            <button class="destroy" ng-click="remove(todo.id)"></button>
                        </div>
                        <form ng-submit="save()">
                            <input class="edit" ng-model="todo.text">
                        </form>
                    </li>
                </ul>
            </section>
            <!-- This footer should hidden by default and shown when there are todos -->
            <footer class="footer">
                <!-- This should be `0 items left` by default -->
                <span class="todo-count"><strong>{{todos.length}}</strong> item left</span>
                <!-- Remove this if you don't implement routing -->
                <ul class="filters">
                    <li>
                        <a class="selected" href="#/">All</a>
                    </li>
                    <li>
                        <a href="#/active">Active</a>
                    </li>
                    <li>
                        <a href="#/completed">Completed</a>
                    </li>
                </ul>
                <!-- Hidden if no completed items are left ↓ -->
                <button class="clear-completed" ng-click="removeAll()" ng-show="existCompleted()">Clear completed </button>
            </footer>
        </section>
        <footer class="info">
            <p><a href="http://www.jnlycdz120.com">孩子得了抽动症怎么办</a></p>
            <!-- Remove the below line ↓ -->
            <p> <a href="http://www.sd61etyy.com.com">济南六一儿童医院收费贵吗</a></p>
            <!-- Change this out with your name and url ↓ -->
            <p> <a href="http://www.66666120.cn">济南六一儿童医院好吗</a></p>
            <p> <a href="http://www.jnlyddz120.com">济南六一儿童医院是治疗多动症的医院</a></p>
        </footer>
        <!-- Scripts here. Don't remove ↓ -->
        <script src="node_modules/angular/angular.js"></script>
        <script src="js/app.js"></script>
    </body>
</html>

app.js

(function (angular) {
    'use strict';
    /**
    * MyTodoMvc Module
    *
    * 应用程序的主要的模块
    */
    var myApp = angular.module('MyTodoMvc', []);
    //注册一个主要的控制器
    myApp.controller('MainController', ['$scope', function($scope){
        //文本框需要一个模型
        $scope.text = '';
        //任务列表需要一个模型
        //每一个任务的结构 { id:1,text:'学习',completed:true}
        $scope.todos = [
            {id:1,text:'学习',completed:false},
            {id:2,text:'睡觉',completed:false},
            {id:3,text:'打豆豆',completed:true},
        ];

        //添加todo
        $scope.add = function(){
            if(!$scope.text){return ;}
            $scope.todos.push({
                id:Math.random(),
                text:$scope.text,
                completed:false
            });
            $scope.text = '';
        };

        //删除todo
        $scope.remove = function(id){
            for(var i=0;i<$scope.todos.length;i++){
                if($scope.todos[i].id === id){
                    $scope.todos.splice(i,1);
                    break;
                }
            }
        };

        //删除所有
        $scope.removeAll = function(){
            var result = [];
            for(var i=0;i<$scope.todos.length;i++){
                if(!$scope.todos[i].completed){
                    result.push($scope.todos[i]);
                }
            }
            $scope.todos = result;
        };


        //是否有完成的
        $scope.existCompleted = function(){
            //该函数一定要有返回值
            for(var i=0;i<$scope.todos.length;i++){
                if($scope.todos[i].completed){
                    return true;
                }
            }
            return false;
        };


        //当前编辑哪个元素
        $scope.currentEditingId = -1;
        $scope.editing = function(id){
            $scope.currentEditingId = id;
        };
        $scope.save = function(){
            $scope.currentEditingId = -1;
        };


        // $scope.checkall = false;
        // $scope.$watch('checkall',function(now,old){
            // for(var i=0;i<$scope.todos.length;i++){
            //  $scope.todos[i].completed = now;
            // }
        // });

        var now = true;
        $scope.toggleAll = function(){
            for(var i=0;i<$scope.todos.length;i++){
                $scope.todos[i].completed = now;
            }
            now = !now;
        };


    }]);
})(angular);

python基础教程

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
2
评论
使用angular完成TodoMVC的例子(1)

查看例子前请到todomvc的github上下载模版，并npm install下载所依赖的包。index.html<!doctype html><html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-sc
复制链接

扫一扫