主要是使用了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. jquery获取url的方式

    (function ($) { $.getUrlParam = function (name) { var reg = new RegExp("(^|&)" + name ...

  2. 英语口语练习系列-C14-常用片语

    句子 1. Some ads are extremely persuasive and we find we buy products we don't really need. 有一些广告非常有说服 ...

  3. 英语口语练习系列-C05-水电

    <登幽州台歌>·陈子昂 陈子昂(公元659-公元700年),唐代文学家,初唐诗文革新人物之一. Num 诗句 1 前不见古人, 2 后不见来者. 3 念天地之悠悠, 4 独怆然而涕下! T ...

  4. 面向对象_new,__eq__,__hash__

    老师博客:http://www.cnblogs.com/Eva-J/articles/7351812.html __new__ __init__是一种初始化的方法 __new__是构建方法,创建一个对 ...

  5. 【Python 补充01】Python运算符

    Python运算符 举个简单的例子 4 +5 = 9 . 例子中,4 和 5 被称为操作数,"+" 称为运算符. 1.算术运算符 + - * / # 加减乘除 % # 取模(返回除 ...

  6. System.IO在不存在的路径下创建文件夹和文件的测试

    本文测试System.IO命名空间下的类,在不存在的路径下创建文件夹和文件的效果: 首先测试创建文件夹: System.IO.Directory.CreateDirectory(@"C:\A ...

  7. springboot maven 报错ArtifactDescriptorException

    maven具体报错提示如下: Description Resource Path Location TypeArtifactDescriptorException: Failed to read ar ...

  8. mybatis 使用注解简化xml映射文件

    目录 关于mybatis注解 初次简单使用mybatis注解示例 利用注解实现指定映射 使用注解实现表间关联(1对1) 关于mybatis注解 注解在java中特别常见,mybatis中也支持注解. ...

  9. Kafka--消息队列

    说明:解耦指的是客户端A和客户端B不需要同步,两者之间的通信是异步的:消息队列是可以复制备份的,因此消息队列具有冗余性和可恢复性:所谓拓展性指的是,在大型分布式系统中,消息队列是分布在集群中的:队列是 ...

  10. Flask 快速使用 —— （1）

    Flask.Django.Tornado框架 区别 1  Django:重武器,内部包含了非常多组件:ORM.Form.ModelForm.缓存.Session.中间件.信号等... 2   Flas ...