主要是使用了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. selenium-获取元素属性（六）

    获取元素属性很简单,使用 get_attribute 方法即可 如下图 获取具体的属性直接将该属性名当作参数传入即可 若是获取值,则获取的实则是该元素的 value,需要将 value 当参数传入 i ...

  2. 时序数据库InfluxDB安装及使用

    时序数据库InfluxDB安装及使用 1 安装配置 安装 wget https://dl.influxdata.com/influxdb/releases/influxdb-1.3.1.x86_64. ...

  3. Python函数二(函数名，闭包，迭代器)之杵臼之交

    函数名的使用: 函数名可以作为值,赋值给变量. 函数名可以作为参数传参给函数. 函数名可以作为返回值. 函数名可以作为元素存储在容器里. 闭包:在嵌套函数内,使用外层局部变量(非全局变量)就是一个闭包 ...

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

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

  5. ReSharper导致Visual Studio缓慢？

    问题排查 我们会竭尽所能的ReSharper的性能方面,但是也有一些已知和未知的情况下,ReSharper的可以减缓的Visual Studio. 这里有一些关键点进行故障排除和修复ReSharper ...

  6. gpio led学习

    2.弄清楚寄存器,gpio等之间的关系,to thi tha 比如: https://www.ggdoc.com/bGludXggZ3Bpb_aTjeS9nA2/NmIzNDIyZGZmMTExZjE ...

  7. centos docker 安装

    centos docker 安装 参考网站 https://docs.docker.com/install/linux/docker-ce/centos/ 1.删除原有docker $ sudo yu ...

  8. 前端——jQuery

    初识jQuery 什么是jQuery? jQuery就是JavaScript和Query,是辅助JavaScript开发的库,应用广泛,形成了行业标准.它对DOM操作做了很好的封装,我们可以用jQue ...

  9. 关于wxpython多线程研究包括(import Publisher等错误研究)

    作为一个自动化测试人员,开发基本的应用桌面程序是必须的!最近在研究wxpython相关知识,目前看到多线程一块,发现官方文档介绍说:"在线程中不能修改修改窗口属性!",但是实际情况 ...

  10. multiset的erase()操作中出现跳过元素的问题

    昨天,我写了一个multiset去重,让tt指向it的后面第一个元素,若重复则删除这2个元素,并令it=tt,it++:来使it指向tt的下一个元素(我想指向原it的后面第2个元素,并认为tt的下一个 ...