基本介绍

（1）视图绑定两个数组，分别对应未完成和已完成

（2）数组的删除splice()，数组的追加push()

基本使用

<!DOCTYPE html>

<html lang="en" ng-app="Todos">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        * {

            padding: 0;

            margin: 0;

        }

        .wrap {

            margin: 120px auto;

            width: 400px;

            border: 1px solid #000;

        }

        .add {

            height: 40px;

            padding-left: 100px;

            border-bottom: 1px solid #ccc;

        }

        .add input {

            width: 300px;

            height: 40px;

            border: none;

            outline: none;

            font-size: 16px;

        }

        .undone {

        }

        .undone span {

            font: 800 20px "微软雅黑";

            display: block;

            margin-top: 9px;

            margin-bottom: 9px;

        }

        .undone ul {

            list-style: none;

        }

        .done {

        }

        .done span {

            font: 800 20px "微软雅黑";

            display: block;

            margin-top: 9px;

            margin-bottom: 9px;

        }

        .done ul {

            list-style: none;

        }

    </style>

    <script src="../libs/angular.min.js"></script>

</head>

<body>

<div class="wrap" ng-controller="TodosController">

    <div class="add">

        <form ng-submit="add()">

            <input type="text" ng-model="value">

        </form>

    </div>

    <div class="undone">

        <span>未完成</span>

        <ul>

            <li ng-repeat="(key,todo) in undone">

                <div>

                    <input type="checkbox" ng-checked="todo.flag" ng-click="finish(key)">

                    {{todo.text}}

                </div>

            </li>

        </ul>

    </div>

    <div class="done">

        <span>已完成</span>

        <ul>

            <li ng-repeat="(key,todo) in done">

                <div>

                    <input type="checkbox" ng-checked="todo.flag">

                    {{todo.text}}

                    <button ng-click="delete(key)">删除</button>

                </div>

            </li>

        </ul>

    </div>

</div>

<script>

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

    Todos.controller('TodosController', ['$scope', function ($scope) {

        $scope.undone = [];

        $scope.done = [];

        $scope.add = function () {

            $scope.undone.push({text: $scope.value, flag: false});

        }

        $scope.finish = function (key) {

            var obj = $scope.undone.splice(key, 1)[0];

            obj.flag = true;

            console.log(obj);

            $scope.done.push(obj);

        }

        $scope.delete = function (key) {

            $scope.done.splice(key, 1);

        }

    }]);

</script>

</body>

</html>

Angular——todos案例的更多相关文章

  1. angular,vue,react的基本语法—双向数据绑定、条件渲染、列表渲染、angular小案例

    基本语法: 1.双向数据绑定 vue 指令:v-model="msg" react constructor(){ this.state{ msg:"双向数据绑定" ...

  2. 【转】asp.net mvc webapi+angular.js案例

    参考地址:http://www.mamicode.com/info-detail-892383.html 大家好,本文用一个简单的demo演示AngularJS在MVC中的使用,在学习这个demo之前 ...

  3. web前端知识总结

    前言: 一直想着整理一下关于前端的知识体系和资料,工作忙了些,挤挤总会有的,资料很多,就看你能不能耐下心坚持去学了,要多学多敲多想,祝你进步~ 学习之前首先要大概了解什么是HTML ,CSS , JS ...

  4. [转]聊聊技术选型 - Angular2 vs Vue2

    转载:https://juejin.im/post/58cab85b44d9040069f38f7a "Come, and take choice of all my library, An ...

  5. 聊聊技术选型 - Angular2 vs Vue2

    作者介绍:李旸,美团点评前端工程师,3 年 Web 前端开发经验,现在是美团点评点餐团队的一员. "Come, and take choice of all my library, And ...

  6. angular的splitter案例学习

    angular的splitter案例学习,都有注释了,作为自己的备忘. <!DOCTYPE html> <html ng-app="APP"> <he ...

  7. 使用Angular 4、Bootstrap 4、TypeScript和ASP.NET Core开发的Apworks框架案例应用：Task List

    最近我为我自己的应用开发框架Apworks设计了一套案例应用程序,并以Apache 2.0开源,开源地址是:https://github.com/daxnet/apworks-examples,目的是 ...

  8. Angular中ui-router实现路由嵌套案例

    学习 ui-router 资料整理 对于Angular内置的路由是单路由视图,ui-router可以实现路由嵌套.后面将会有一个案例概括前面所有资料整理 学习 ui-router - 管理状态  ht ...

  9. Angular路由与多视图综合案例

    Ajax请求存在的几个问题 (1)Ajax请求不会留下History 记录,会导致浏览器后退按钮失效 (2)用户无法直接通过URL进入应用中的指定页面(保存书签.链接分享给朋友) (3)Ajax对SE ...

随机推荐

  1. S - Arc of Dream 矩阵快速幂

    An Arc of Dream is a curve defined by following function: where a 0 = A0 a i = a i-1*AX+AY b 0 = B0  ...

  2. 13、Java并发性和多线程-Java Volatile关键字

    以下内容转自http://tutorials.jenkov.com/java-concurrency/volatile.html(使用谷歌翻译): Java volatile关键字用于将Java变量标 ...

  3. MyBatis与Spring MVC结合时，使用DAO注入出现：Invocation of init method failed; nested exception is java.lang.IllegalArgumentException: Property 'sqlSessionFactory' or 'sqlSessionTemplate' are required

    错误源自使用了这个例子:http://www.yihaomen.com/article/java/336.htm,如果运行时会出现如下错误: Invocation of init method fai ...

  4. 多Tabs的横向滚动插件（支持Zepto和jQuery）

    一. 效果图 二. 功能介绍 1. 支持横向移动 2. 支持点击Tab后该Tab居中 3. 拉到最左边和最右边后依然可以拉动,只是tabs的移动距离变小. 三. 使用说明 1. 在你的html中添加T ...

  5. ISO和焦距

    要说什么是ISO还要从传统胶片相机说起,ISO称作为感光度,它是衡量传统相机所使用胶片感光速度的国际统一指标,其反映了胶片感光时的速度(其实是银元素与光线的光化学反应速率).而对于现在并不使用胶片的数 ...

  6. Workspace in use or cannot be created, choose a different one.--错误解决的方法

    eclipse 使用一段时间后.有时会由于一些故障自己就莫名奇异的关闭了,再打开时有时没有问题,有时有会提示错误 Workspace Unavailable: Workspace in use or ...

  7. 大数据分析:结合 Hadoop或 Elastic MapReduce使用 Hunk

    作者 Jonathan Allen ,译者 张晓鹏 Hunk是Splunk公司一款比較新的产品,用来对Hadoop和其他NoSQL数据存储进行探測和可视化,它的新版本号将会支持亚马逊的Elastic ...

  8. OpenCV2马拉松第17圈——边缘检測(Canny边缘检測)

    计算机视觉讨论群162501053 转载请注明:http://blog.csdn.net/abcd1992719g 收入囊中 利用OpenCV Canny函数进行边缘检測 掌握Canny算法基本理论 ...

  9. android中ping命令的实现

    /** * 推断Ping 网址是否返回成功 *  * @param netAddress * @return */ public static String isPingSuccess(int pin ...

  10. SVN提交代码冲突解决方法总结

    在近期svn提交代码时遇到多种情况的问题,现做一个解决办法的总结如下: 插播一条:idea下被svn版本控制各类文件的颜色区分,红棕色,未加入版本控制:绿色,已经加入控制暂未提交:蓝色,加入,已提交, ...