<!DOCTYPE HTML>

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

<head>

    <meta charset="UTF-8">

    <title></title>

    <script type="text/javascript" src="lib/angular.js"></script>

    <script type="text/javascript">

        function TodoCtrl($scope){

            $scope.todos=[{text:"learn angular",done:true},{text:"build an angular app",done:false}];

            $scope.addTodo=function(){

                $scope.todos.push({text:$scope.todoText,done:false});

                $scope.todoText="";

            }

            $scope.remaining=function(){

                var count=0;

                angular.forEach($scope.todos,function(todo){

                    count+=todo.done ? 0 : 1;

                });

                return count;

            }

            $scope.archive=function(){

                var oldTodos=$scope.todos;

                $scope.todos=[];

                angular.forEach(oldTodos,function(todo){

                    if (!todo.done) {

                        $scope.todos.push(todo);

                    }

                })

            }

        }

    </script>

    <style type="text/css">

    .done-true{

        text-decoration: line-through;

        color:grey;

    }

    </style>

    <link rel="stylesheet" href="css/bootstrap-responsive.css">

    <link rel="stylesheet" href="css/bootstrap.css">

</head>

<body>

<h2>Todo</h2>

    <div ng-controller="TodoCtrl">

      <span>{{remaining()}} of {{todos.length}} remaining</span>

      [ <a href="" ng-click="archive()">archive</a> ]

      <ul class="unstyled">

        <li ng-repeat="todo in todos">

          <input type="checkbox" ng-model="todo.done">

          <span class="done-{{todo.done}}">{{todo.text}}</span>

        </li>

      </ul>

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

        <input type="text" ng-model="todoText"  size="30"

               placeholder="add new todo here">

        <input class="btn btn-primary" type="submit" value="add">

      </form>

    </div>

</body>

</html>

angular todo的更多相关文章

  1. angular初步认识一

    最近比较流行MVC前端框架开发,最近研究了一个框架AngularJS框架 不说那么多,先上例子,我是个代码控 <!DOCTYPE html> <html lang="en& ...

  2. Angular提示文件不是一个有效的模块

    ERROR in src/app/app.component.ts(2,23): error TS2306: File '/home/jerry/angular/todo/src/app/model. ...

  3. MEAN: AngularJS + NodeJS的REST API开发教程

    Node.JS https://www.jdon.com/idea/nodejs/web-app-with-angularjs-and-rest-api-with-node.html Mean是一个热 ...

  4. ApacheCN JavaScript 译文集 20211122 更新

    JavaScript 编程精解 中文第三版 零.前言 一.值,类型和运算符 二.程序结构 三.函数 四.数据结构:对象和数组 五.高阶函数 六.对象的秘密 七.项目:机器人 八.Bug 和错误 九.正 ...

  5. 使用angular.js开发的一个简易todo demo

    前沿 在CVTE实习考察的一周里,接触到了angular,并在最后的一天任务里要求使用angular做一个功能主要包括创建.编辑.恢复.删除以及留言的todo demo,并支持响应式布局.因为之前没怎 ...

  6. Angular学习笔记(2)——TODO小应用

    Angular学习笔记(2)--TODO小应用 1. 写在前面 之前我们跑了Angular的Hello World,你是不是对它有点感觉了呢?这一篇将结合一个TODO程序来继续学习Angular的用法 ...

  7. 【Todo】React & Nodejs学习 &事件驱动，非阻塞IO & JS知识栈：Node为主，JQuery为辅，Bootstrap & React为辅辅，其他如Angular了解用途即可

    JS知识栈:Node为主,JQuery为辅,Bootstrap & React为辅辅,其他如Angular了解用途即可 今天在学习ReactJS和NodeJS,看到关于ReactJS的这篇文章 ...

  8. vue.js几行实现的简单的todo list

    序:目前前端框架如:vue.react.angular,构建工具fis3.gulp.webpack等等...... 可谓是五花八门,层出不穷,眼花缭乱...其实吧只要你想玩还是可以玩玩的..下面是看了 ...

  9. angular.js规范写法

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

随机推荐

  1. Careercup - Microsoft面试题 - 5684901156225024

    2014-05-10 23:45 题目链接 原题: Arrange the numbers in an array in alternating order. For example if the a ...

  2. 在线自动下载最新版本jquery

    <script src="http://code.jquery.com/jquery-latest.js">

  3. 项目部署之VPN+端口映射

    背景:出差开发项目,需要在客户那里部署基本成型的系统.这套系统需要一个公网的ip地址(一个后台管理系统,使用花生壳提供域名服务.一个公网的tcp server,java io实现),但是客户那里无法提 ...

  4. Codeforces Round #351 (VK Cup 2016 Round 3, Div. 2 Edition) D Bear and Two Paths

    题目链接: http://codeforces.com/contest/673/problem/D 题意: 给四个不同点a,b,c,d,求是否能构造出两条哈密顿通路,一条a到b,一条c到d. 题解: ...

  5. shell编程之数组和关联数组

    一.数组类似c语言的数组 1.两种赋值方式 可以整体定义数组:ARRAY_NAME=(value0 value1 value2 value3 ...) 此时数组的下标默认是从0开始的 还可以单独定义数 ...

  6. 【BZOJ】【3205】【APIO2013】机器人robot

    斯坦纳树 好神啊……Orz zyf && PoPoQQQ 为啥跟斯坦纳树扯上关系了?我想是因为每个点(robot)都沿着树边汇到根的时候就全部合起来了吧= =这个好像和裸的斯坦纳树不太 ...

  7. ios读取通讯录信息

    ios读取通讯录信息 (2012-05-22 14:07:11) 标签: ios读取通讯录 it   iphone如许app读取通讯录信息,读取通讯录信息时需要加载AddressBookUI 和Add ...

  8. QGraphics

    QGraphicsView和QGraphicsScene QGraphicsScene提供一个场景,可以添加各种item,QGraphicsView用于将元素显示,并支持旋转和缩放:可以将QGraph ...

  9. KIP-32 Add timestamps to Kafka message

    通过KIP32,Kafka的每条消息都加进了时间戳,这个KIP在0.10.0.0被加入. 说到“时间”,先贴张图,娱乐一下(如果对星球大战系列电影不熟的话,请自动略过……) 这个KIP的文档在 KIP ...

  10. 《暗黑世界GM管理后台系统》部署+功能说明文档

    http://www.9miao.com/product-10-1073.html <暗黑世界GM管理后台系统>部署+功能说明文档 <暗黑世界GM管理后台系统>部署+功能说明文 ...