基本介绍

（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. [K/3Cloud]DBServiceHelper.ExecuteDataSet(this.Context, sql)) 返回数据问题

    例如下面代码: int sQty = 0; string sql = string.Format(@" Select FMATERIALID ,FBASEUNITID ,FAUXPROPID ...

  2. codeforces gym 100357 I (费用流）

    题目大意 给出一个或与表达式,每个正变量和反变量最多出现一次,询问是否存在一种方案使得每个或式中有且仅有一个变量的值为1. 解题分析 将每个变量拆成三个点x,y,z. y表示对应的正变量,z表示对应的 ...

  3. my first emacs custom key binding

    (defun comment-this-level ()  (interactive)  (move-beginning-of-line 1)  (set-mark-command nil)  (fo ...

  4. 模拟赛 Problem 2 不等数列(num.cpp/c/pas)

    Problem 2 不等数列(num.cpp/c/pas) [题目描述] 将1到n任意排列,然后在排列的每两个数之间根据他们的大小关系插入“>”和“<”.问在所有排列中,有多少个排列恰好有 ...

  5. Sublime Text 3显示文本编码

    在Settings上加入"show_encoding":true 进入这个选项:[Preferences]->[Settings] 搞定之后,在右下角可以看见文本编码

  6. 《WF in 24 Hours》读书笔记 - Hour 2(2) - Workflow：创建分支和传递参数

    1. 修改workflow1.xaml,添加Flowchart,添加Flowdesicion,添加CodeActivity2,并且名字改为下图所示: 2. CodeActivity1和2的代码如下: ...

  7. what happens if we dont resolve or reject the promise

    https://stackoverflow.com/questions/36734900/what-happens-if-we-dont-resolve-or-reject-the-promise I ...

  8. Proxy Server代理服务器（轉載）

    宽带IP城域网开通以来,单位连上了宽带网,10M的带宽让我们感受到了宽带的魅力.电信只提供7个IP地址,对任何一个单位来说都太少了,常用的解决办法是使用代理服务器.微软的MS Proxy Server ...

  9. Reduce 任务的完整数据流

  10. 一个APP爆炸的时代，假设没有wifi

    我们每天都离不开的微信,又传来了一个新消息.你造?微信公众平台新增了设备功能.眼下可支持可穿戴设备,将来呢,前景不可限量!能够想象,"后果"是我们越来越离不开微信,依附于它.这样的 ...