基本介绍

（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. Java 学习（6）：java Number & Math & String & 数组...常用类型

    目录 --- Number & Math类 --- Character 类 --- String 类 --- StringBuffer 类 --- 数组 Number & Math类: ...

  2. 特种部队（codevs 1427）

    题目描述 Description 某特种部队接到一个任务,需要潜入一个仓库.该部队士兵分为两路,第一路士兵已经在正面牵制住了敌人,第二路士兵正在悄悄地从后方秘密潜入敌人的仓库.当他们到达仓库时候,发现 ...

  3. python中实现将普通字典dict转换为java中的treeMap

    上代码: from heapq import heappush,heappop from collections import OrderedDict def toTreeMap(paramMap): ...

  4. redis+spring

    1. 在配置文件中添加 注解 <cache:annotation-driven cache-manager="cacheManager" key-generator=&quo ...

  5. 第3章 ES文档和故障处理

    第3章 ES文档和故障处理 一.ES网络配置表 ES网络配置表是ES的硬件和软件组成的列表.ES网络配置常包括以下项目: 分级 项目 杂项信息 系统名.系统厂商/型号.CPU速率.RAM.存储器.系统 ...

  6. 鸟哥的Linux私房菜-----10、学习Bash

  7. js 里面的 function 与 Function

    function 是 js 的标识符 Function 是 js 里面的一个 构造函数 1.new function 与 new Function 的区别 new 运算符在 js 里面是 创建一个自定 ...

  8. sed 之 -n p

    sed是一个面向字符流的编辑器,一般情况下每次读入一行到一个名为模式空间的地方,进行编辑:但是也可以读入多行数据进行编辑. -n:抑制默认输出 p打印模式空间内容 cat test a b sed ' ...

  9. 【POJ 3714】 Raid

    [题目链接] http://poj.org/problem?id=3714 [算法] 分治求平面最近点对 [代码] #include <algorithm> #include <bi ...

  10. Python猜年龄

    题目:Python实现猜年龄 步骤一:实现最简单的猜年龄 # 事先定义 dark_knight_age = 28 user_age = input('Please guess my age:') us ...