主要是使用了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. PHP生成PDF并转换成图片爬过的坑

    需求描述:根据订单通过模板合同生成新的PDF合同通过e签宝签约后转为图片给用户下载. 需求整理: 1.如何生成PDF文件:使用TCPDF扩展生成.思考: ⑴为了方便将模板中的固定占位符替换为订单中的内 ...

  2. IDEA包名显示设置

    项目结构视图右上角那个齿轮 选择[Compact Empty Middle Packages],包会合并显示 [Hide Empty Middle Packages]去掉前面的√,不分层级显示

  3. QQ的孤独

    接触网络到现在,已是好多年前的事了.初识网络犹如初恋般,充满了新鲜和好奇,于是,从聊天室到QQ,MSN,邮箱,再去BBS.然后有了博客^^^^^^ 那时的网络于我是那般充满诱惑,整天穿梭其中,乐此不彼 ...

  4. linux命令之：yum

    yum(全称为 Yellow dog Updater, Modified)是一个在Fedora和RedHat以及SUSE中的Shell前端软件包管理器.基於RPM包管理,能够从指定的服务器自动下载RP ...

  5. Node.js完整的响应html页面（包括css，js文件）

    主要思想就是任何一个静态文件也应该做响应,一个获取静态文件都应当请求来处理,这是主要思想. 同时要注意两点.第一,对于不同的文件类型,比如html,css,js,请求头里面的文件类型需要根据不同的文件 ...

  6. InvalidOperationException: Unable to resolve service for type 'Microsoft.AspNetCore.Identity.UserManager`1[Microsoft.AspNetCore.Identity.IdentityUser]'

    在新建asp.net core 应用后, 添加了自定义的ApplicationDbContext 和ApplicationUser ,并添加了Identity认证后, 会出现 InvalidOpera ...

  7. Linux实战教学笔记49：Zabbix监控平台3.2.4（一）搭建部署与概述

    https://www.cnblogs.com/chensiqiqi/p/9162986.html 一,Zabbix架构 zabbix 是一个基于 WEB 界面的提供分布式系统监视以及网络监视功能的企 ...

  8. 使用Jasypt对SpringBoot配置文件加密(转)

    文章转自   https://www.jianshu.com/p/323ec96c46d2 引入jasypt <dependency> <groupId>com.github. ...

  9. NodeJS之异常处理

    1. 为什么要处理异常? 如果我们不处理异常的话,直接会导致程序奔溃,用户体验比较差,因此我们要对异常进行处理,当出现异常的情况下,我们要给用户一个友好的提示,并且记录该异常,方便我们排查. 2. 在 ...

  10. C# 使用微软自带的Speech进行语音输出

    1.在VS中使用微软自带的Speech进行语音播报,首先需要添加引用: 2.具体实现逻辑代码如下: