基本介绍

（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. PatentTips – Shader Interfaces

    BACKGROUND Today's graphic processing units (GPUs) host all of the computations necessary to generat ...

  2. ISATAP隧道方式接入IPv6和RRAS（Windows路由与远程访问）似乎是冲突的

    在启用了RRAS的NAT服务器上设置ISATAP隧道,虽然能正常获取IPv6地址,但是IPv6网络实际是不通的...

  3. 【CV论文阅读】 Fast RCNN + SGD笔记

    Fast RCNN的结构: 先从这幅图解释FAST RCNN的结构.首先,FAST RCNN的输入是包含两部分,image以及region proposal(在论文中叫做region of inter ...

  4. Java Map 怎样实现Key 的唯一性？

    大家都知道.在Map和Set不可存在反复元素? 可是对于内部的细节我们并不了解.今天我们就一块来 探讨一下! 1 对于 HashMap  HashSet 他们的底层数据结构的实现是:维护了一张  Ha ...

  5. 玩转iOS开发 - 视图控制器生命周期

    视图控制器生命周期

  6. 解决myeclipse中struts2 bug问题包的替换问题

    由于struts2的bug问题,手工替换还是比較麻烦.但即便是最新的myeclipse2014也没有替换最新的struts2包,研究了一天,最终找到了解决的方法.下面就解决方法与大家分享一下. 1.在 ...

  7. javascript 和 CoffeeScript 里的类

    javascript不是面向对象的语言,它用函数来模拟类和继承. javascript里,提供一个类并不难: var Person,l4, z3; Person = function(name) { ...

  8. Codeforces Round #273 (Div. 2)D. Red-Green Towers DP

    D. Red-Green Towers   There are r red and g green blocks for construction of the red-green tower. Re ...

  9. MySQL5.6 GTID方式，配置主从

    迁移数据到从库 数据导出: mysqldump -uroot -p111111 -h127. -P3306 -q --single-transaction -R -E --triggers --def ...

  10. 深度学习的seq2seq模型——本质是LSTM，训练过程是使得所有样本的p(y1,...,yT‘|x1,...,xT)概率之和最大

    from:https://baijiahao.baidu.com/s?id=1584177164196579663&wfr=spider&for=pc seq2seq模型是以编码(En ...