基本介绍

（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. 解决canvas跨域问题(图片,视频资源跨域)

    添加跨域条件   crossorigin="anonymous" [Redirect at origin 'http://xxx.xx.com' has been blocked ...

  2. 条款50: 提高对C++的认识

    class Base { public: virtual void f(int x); }; class Derived: public Base { public: virtual void f(d ...

  3. 小米2S 小米手机如何手动升级到开发版

    1 从官网下载系统的更新包,比如对于小米2S,从下面的网址下载. http://www.miui.com/download-2.html     2 下载完成之后,放到手机的任意文件夹下,比如下面的S ...

  4. Android高仿UC浏览器和360手机卫士消息常驻栏（通知栏）

    之前网上看了下自己定义消息栏,通知栏,了解到了Notification这个控件.发现UC浏览器等都是这样的类型,今天写个demo实现下.如图: 当中每一个button都有不同的功能.代码例如以下: p ...

  5. Qt 开发程序后的公布问题

    Qt 开发程序后的公布问题 Qt 是一套跨平台 C++ 图形用户界面应用程序开发框架,利用它能够很方便的开发各种类型的应用程序.可是随着 Qt 的发展.功能越来越强大,公布时须要文件也越来越多.公布时 ...

  6. JDBC高级特性(一)结果集，批量更新

    一.ResultSet的高级特性 1 可滚动ResultSet 1)向前和向后滚动 滚动特性 在JDBC初期版本号中, ResultSet仅能向前滚动 在JDBC兴许版本号中, ResultSet默认 ...

  7. 二分查找法（binary search）

    二分查找法:一种在有序列表中查找某个值的算法,它每次都将待查找的空间分为两半,在其中一般继续查找. 使用二分查找的前提是:已经排序好的列表.否则,sum对其查找的结果不做保证. 代码实现: // 使用 ...

  8. codeforces round #415 div2

    由于下午硬钢树套树和大力颓废就没补完 C:我傻逼比赛时没做出来...就是排个序然后算贡献 #include<bits/stdc++.h> using namespace std; type ...

  9. 虫食算 2004年NOIP全国联赛提高组(dfs)

    1064 虫食算 2004年NOIP全国联赛提高组  时间限制: 2 s  空间限制: 128000 KB  题目等级 : 钻石 Diamond 题解  查看运行结果     题目描述 Descrip ...

  10. 5.3QBXT模拟赛

    出题人:钟惠兴 题目名称 讨厌整除的小明 吸血鬼 鱼的感恩 题目类型 传统型 传统型 传统型 题目目录/可执行文件名 ming vamp fool 输入文件名 ming.in vamp.in fool ...