主要是使用了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++ 多线程 等待一次性事件 std::promise用法

    多线程 等待一次性事件 std::promise用法 背景:不是很明白,不知道为了解决什么业务场景,感觉std::async可以优雅的搞定一切的一次等待性事件,为什么还有个std::promise. ...

  2. CADisplayLink以及定时器的使用

    第一种: 用CADisplayLink可以实现不停重绘. - (CADisplayLink *)link { if (!_link) { // 创建定时器,一秒钟调用rotation方法60次 _li ...

  3. 消息 4900，级别 16，状态 2，第 1 行 对表 'XX.XXX' 执行 ALTER TABLE SWITCH 语句失败。对于已启用更改跟踪的表，不可能切换其分区。请先禁用更改跟踪，再使用 ALTER TABLE SWITCH。

    问题描述: 今天处理切换分区数据的时候出现了这个错误: 消息 4900,级别 16,状态 2,第 1 行 对表 'XX.XXX' 执行 ALTER TABLE SWITCH 语句失败.对于已启用更改跟 ...

  4. 使用mybatis操作AS400数据库

    先简单说一下怎么使用[jt400.jar]连接AS400上的DB2数据库. ※ jt400.jar资源,如果有安装AS400客户端的话,参考IBM官网 ※ http://www-01.ibm.com/ ...

  5. FutureTask并发详解，通俗易懂

    最近做项目,使用到了FutureTask和主线程并发,应用到实际中还是挺实用的,特在此总结一下. 有不对之处,忘各位多多指出. package com.demo; import java.util.c ...

  6. Python爬虫 selenium

    库的安装 pip3 install selenium 声明浏览器对象 from selenium import webdriver browser = webdriver.Chrome() brows ...

  7. SpringCloud 学习网址记录

    SpringCloud Gateway https://www.cnblogs.com/ityouknow/p/10141740.html 熔断降级的概念 https://blog.csdn.net/ ...

  8. 关于idea在运行web项目时部署的位置

    (转) 以前一直很好奇,在idea中运行tomcat,把项目部署到其中,运行起来,然后我去tomcat目录下去看,根本找不到我部署的项目 那我的项目是咋运行的啊… - - 后来我就查啊查 ,纠结啊纠结 ...

  9. sanic set up

    (venv) MacBook-Pro:bin shihw$ pip3 install sanicCollecting sanic Downloading https://files.pythonhos ...

  10. C++笔记--std::相关

    std::packaged_task https://www.cnblogs.com/haippy/p/3279565.html https://en.cppreference.com/w/cpp/t ...