主要是使用了angular的指令。

学习地址:http://www.runoob.com/angularjs/angularjs-tutorial.html

1.输入数据剩余字数会相应减少，点击保存弹出已保存提示信息，点击清空输入数据为空。

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <meta http-equiv="X-UA-Compatible" content="ie=edge">

  <title>Document</title>

  <script src="../angular.min.js"></script>

</head>

<body>

  <div ng-app="myApp" ng-controller="myController">

    <h2>我的笔记</h2>

    <form>

      <textarea ng-model="message" rows="10" cols="40"></textarea>

      <P>

        <button ng-click="save()">保存</button>

        <button ng-click="clear()">清空</button>

      </P>

    </form>

    <h2>剩余字数：<span ng-bind="left()"></span></h2>

  </div>

  <script>

    var app = angular.module("myApp",[]);

    app.controller("myController",function($scope){

      $scope.message = '';

      $scope.save = function(){

        alert("notes save!");

      }

      $scope.clear = function(){

        $scope.message = '';

      }

      $scope.left = function(){

        return 100 - $scope.message.length;

      }

    })

  </script>

</body>

</html>

注意：

由于需要显示在页面上，即需要输出数据，使用ng-bind指令，

该指令需要在HTML元素中结合使用(span)

2.输入数据，点击新增，下面会出现一行数据，内容为刚输入的数据，输入一栏清空，选择某条/多条数据，点击删除数据按钮，数据被删除

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

    <script src="../angular.min.js"></script>

</head>

<body>

    <div ng-app="myApp" ng-controller="myController">

        <h2>我的备忘录</h2>

        <input type="text" size="30" ng-model="message">

        <button ng-click="insert()">新增</button>

        <p ng-repeat="x in todoList">

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

            <span ng-bind="x.todoText"></span>

        </p>

        <p>

            <button ng-click="delete()">删除数据</button>

        </p>

    </div>

    <script>

        var app = angular.module("myApp",[]);

        app.controller("myController",function($scope){

            $scope.message = '';

            $scope.todoList = [{todoText : "clean house",todo : false}];

            $scope.insert = function(){

                $scope.todoList.push({todoText : $scope.message,todo : false});

                $scope.message = '';

            }

            $scope.delete = function(){

                var oldList = $scope.todoList;

                $scope.todoList = [];

                angular.forEach(oldList,function(x){

                    if(!x.todo){

                        $scope.todoList.push(x);

                    }

                })

            }

        })

    </script>

</body>

</html>

注意：

可以给text文本设置size属性，规定需要输入的数据长度

需要使用循环，可以将todoList数组中的数值输出出来

在todoList数组中每条数据中设置todo属性，以便对增加的数据进行删除时选择（checkbox）

增加按钮实现的原理是：向数组中push输入数据，从而循环输出数组中的数据，达到增加的效果

删除按钮实现的原理：

创建一个新的数组（oldList），然后将当前数组（todoList)复制给新数组，再将todoList清空

使用循环，判断oldList中的每条数据中的todo是否为false，即是否被选中，

若未被选中，则将该条数据添加进todoList,最后输出该数组中的所有数据，即实现了删除被选择的数据。

angular的小实例的更多相关文章

  1. --@angularJS--综合小实例1

    <!DOCTYPE HTML><html ng-app="myapp"><head> <title>综合小实例</title& ...

  2. winform 异步读取数据 小实例

    这几天对突然对委托事件,异步编程产生了兴趣,大量阅读前辈们的代码后自己总结了一下. 主要是实现 DataTable的导入导出,当然可以模拟从数据库读取大量数据,这可能需要一定的时间,然后 再把数据导入 ...

  3. CSS应用内容补充及小实例

    一.clear 清除浮动 <!DOCTYPE html> <html lang="en"> <head> <meta charset=&q ...

  4. Objective-C之代理设计模式小实例

    *:first-child { margin-top: 0 !important; } body > *:last-child { margin-bottom: 0 !important; } ...

  5. Objective-C之@类别小实例

    *:first-child { margin-top: 0 !important; } body > *:last-child { margin-bottom: 0 !important; } ...

  6. OC小实例关于init方法不小心的错误

    *:first-child { margin-top: 0 !important; } body > *:last-child { margin-bottom: 0 !important; } ...

  7. canva实践小实例 —— 马赛克效果

    前面给大家带来了操作像素的API,此时此刻,我觉得应该配以小实例来进行进一步的说明和演示,以便给大家带来更宽广的视野和灵感,你们看了我的那么多的文章,应该是懂我的风格,废话不多说,进入正题: 这次给大 ...

  8. canvas实践小实例二 —— 扇形

    俗话说:发图不留种,菊花万人捅!我这里想延伸一下:教学不给例,说你是傻逼!哎呀,还挺押韵,嘻嘻,开个玩笑! 我们都讲了四期API的知识了,估计大家看的也是枯燥的很啊,前面的小实例也是太简单,简直不解渴 ...

  9. canvas实践小实例一 —— 画板工具

    前面讲了一部分的canvasAPI的基础知识,光看API的介绍确实是很无趣乏味,需要一点可以激发内心的激情的东西来激励自己来学习,于是就了伴随canvasAPI学习的小实例,这样通过API的知识,结合 ...

随机推荐

  1. c/c++ 多线程 detach的困惑

    多线程 detach的困惑 求大神解答: 1,当在一个函数里启动一个线程后,并detach了 2,detach的线程里使用了这个函数里new出来的一个对象 3,detach后,delete了这个对象 ...

  2. Java 位运算符和 int 类型的实现

    Java 位运算符和 int 类型的实现 其他运算符 # 算术运算符 +.-.*./.++i.i++.--i.i-- # 关系运算符 ==.!=.>.<.>=.<= # 逻辑运 ...

  3. jQuery如何制作动画

    下面为一组图片(四张)展示 1 2 3 4 页面代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN& ...

  4. 如何使用PowerDesigner建表

    说明 个人认为,直接使用数据库管理工具如Navicat直接建表,如果后期需要进行库的迁移,不是那么方便,不如直接在PowerDesigner里面建表,更自由一些 版本:PowerDesigner15 ...

  5. Markdown语法指南

    1.背景 个人比较喜欢用Markdonw写东西,比如写博客随笔,写有道云笔记等,但有的时候会突然忘记某个具体语法怎么写了,如插入图片.插入链接.表格等,那干脆把这个语法简单地总结一下,也方便日后快速查 ...

  6. LeetCode算法题-Number Complement（Java实现-五种解法）

    这是悦乐书的第240次更新,第253篇原创 01 看题和准备 今天介绍的是LeetCode算法题中Easy级别的第107题(顺位题号是476).给定正整数,输出其补码数.补充策略是翻转其二进制表示的位 ...

  7. 云数据库PolarDB（一）

    一.出现的背景及PolarDB简介 阿里云,中国第一家拥有完整云计算能力的企业. 2015年,在计算界的奥运会Sort Benchmark中,阿里云计算100TB数据排序只用了不到7分钟,把Apach ...

  8. 爬虫系列---scrapy全栈数据爬取框架(Crawlspider)

    一 简介 crawlspider 是Spider的一个子类,除了继承spider的功能特性外,还派生了自己更加强大的功能. LinkExtractors链接提取器,Rule规则解析器. 二 强大的链接 ...

  9. 【Linux基础】查看硬件信息-系统

    1.查看计算机名 hostname 2.查看内核/操作系统/CPU信息 uname -a   4.查看操作系统版本(Linux) head -n 2 /etc/issue Red Hat Enterp ...

  10. mysql 报错ERROR 1820 (HY000): You must reset your password using ALTER USER statement before executin

    解决办法1. 修改用户密码mysql> alter user 'root'@'localhost' identified by 'youpassword'; 或者 mysql> set p ...