<!DOCTYPE html>

<html lang="zh_CN">

 <head>

  <title>字数小例子</title>

 </head>

 <body ng-app="noCntAPP">

  <div ng-controller="noCntCtrl">

    <h2>我的笔记</h2>

    <textarea cols="30" rows="10" ng-model="txtArea"></textarea>

    <p><button>读取</button>

    <button>提交</button>

    <button>撤销</button>

    <p>剩余字数: {{getCount()}}</p>

    </p>

  <div>

  <script type="text/javascript" src="./angular.js"></script>

  <script type="text/javascript">

    angular.module('noCntAPP',[])

           .controller('noCntCtrl',['$scope',function($scope){

                $scope.txtArea=''; // 初始化文本区域值为空串

                $scope.getCount=function(){

                   return 100 - $scope.txtArea.length;

                }

          }]);

  </script>

 </body>

</html>

剩余字数小例子

<!DOCTYPE html>

<html lang="zh_CN">

 <head>

  <title>字数小例子</title>

 </head>

 <body ng-app="noCntAPP">

  <div ng-controller="noCntCtrl">

    <h2>我的笔记</h2>

    <textarea cols="30" rows="10" ng-model="txtArea"></textarea>

    <p><button>读取</button>

    <button>提交</button>

    <button>撤销</button>

    <p>剩余字数: {{getCount()}}</p>

    </p>

  <div>

  <script type="text/javascript" src="./angular.js"></script>

  <script type="text/javascript">

    angular.module('noCntAPP',[])

           .controller('noCntCtrl',['$scope',function($scope){

                $scope.txtArea=''; // 初始化文本区域值为空串

                $scope.getCount=function(){

                   if($scope.txtArea.length>100){

                   $scope.txtArea = $scope.txtArea.slice(0,100); // 超过 100 截取前 0-99 个字符

                }

                   return 100 - $scope.txtArea.length;

                }

          }]);

  </script>

 </body>

</html>

改进一下加入字符串长度判断

<!DOCTYPE html>

<html>

 <head>

  <title>数据存储演示</title>

 </head>

 <body ng-app="storageApp">

  <div ng-controller="storageCtrl">

    <h2>我的笔记</h2>

    <textarea cols="30" rows="10" ng-model="note">

    </textarea>

    <p>

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

     <button ng-click="read()">读取</button>

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

    </p>

    <p>{{getRestCount()}}</p>

    <script type="text/javascript" src="./angular.js"></script>

    <script type="text/javascript">

       angular.module('storageApp',[])

              .controller('storageCtrl',['$scope',function($scope){

        $scope.note=''; //初始化笔记为空串

            $scope.getRestCount=function(){

            if($scope.note.length>100){

                $scope.note=$scope.note.slice(0,100); // 若输入大于100个字符则截取前100个字符

                return 100 - $scope.note.length;

            }

        }

           $scope.save=function(){

            alert('note is saved!');

            localStorage.setItem("note_key",JSON.stringify($scope.note)); //转成json串保存到本地存储

             $scope.note='';

        }

         $scope.read=function(){

            $scope.note = JSON.parse(localStorage.getItem('note_key') || '[]'); //处理为 null 的情况

        }

                $scope.truncate=function(){

                  localStorage.removeItem('note_key');

            $scope.note='';

        }

    }])

    </script>

  </div>

 </body>

</html>
<!DOCTYPE html>

<html>

 <head><title>备忘示例代码</title></head>

 <body ng-app="topAPP">

  <div ng-controller="noteCtrl">

     <h2>我的备忘</h2>

     <p><input type="text" ng-model="newHabit"/><button ng-click="add()">新增</button></p>

     <div ng-repeat="habit in habits">

       <input type="checkbox" ng-model="habit.isChecked"/>

       <span>{{habit.habit}}</span>

     </div>

     <p><button ng-click="del()">删除选中项</button></p>

  <div>

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

  <script>

   angular.module('topAPP',[])

          .controller('noteCtrl',['$scope',function($scope){

        $scope.habits=[{habit:'吃饭',isChecked:false},{habit:'睡觉',isChecked:true},{habit:'打豆豆',isChecked:false}];

                $scope.add=function(){

                        console.log($scope.newHabit);

            if(!$scope.newHabit){

                alert("输入不能为空!");

                return;

            }

            var newObj={

                habit:$scope.newHabit,

                isChecked:false

            };

             $scope.habits.unshift(newObj);

                        $scope.newHabit='';

        };

        $scope.remove=function(){

             $scope.habits.forEach(function(item,index){

                if(item.isChecked){

                    $scope.habits.splice(index,1);

                    $scope.remove();// 递归防止连续index勾选

                }

            });

        };

        $scope.del=function(){

            //逆向思维,仅显示未勾选的

            var oldHabits=$scope.habits;

            $scope.habits=[];// 新建一个空数组

                        oldHabits.forEach(function(item,index){

                if(!item.isChecked){

                    $scope.habits.push(item);

                }

            });

        }

     }]);

  </script>

 </body>

</html>

angularjs遍历增删

AngularJS 启程三的更多相关文章

  1. AngularJS进阶(三十九)基于项目实战解析ng启动加载过程

    基于项目实战解析ng启动加载过程 前言 在AngularJS项目开发过程中,自己将遇到的问题进行了整理.回过头来总结一下angular的启动过程. 下面以实际项目为例进行简要讲解. 1.载入ng库 2 ...

  2. 现在就开始使用AngularJS的三个重要原因

    现在就开始使用AngularJS的三个重要原因 在线演示1 本地下载 如果你不熟悉什么是Angular.js的话,小编我强烈推荐你阅读 Javascript教程:AngularJS的五个超酷特性.简单 ...

  3. angularJS 服务三

    路由 一 简介 1.路由机制 为了实现无刷新的视图切换,我们通常会用ajax请求从后台取数据,然后套上HTML模板渲染在页面上,然而ajax的一个致命缺点就是导致浏览器后退按钮失效,尽管我们可以在页面 ...

  4. 使用AngularJS的三个重要原因

    入门教程:http://www.ituring.com.cn/minibook/303 : http://angularjs.cn/tag/AngularJS 原因一:Google开发的框架 要知道开 ...

  5. 精通AngularJS（三）深入scope，继承结构，事件系统和生命周期

    深入探讨 Scope 作用域 每一个 $scope 都是类 Scope 的一个实例.类 Scope 拥有可以控制 scope 生命周期的方法,提供事件传播的能力,并支持模板渲染. 作用域的层次结构 让 ...

  6. AngularJS 第三天----作用域

    作用域的概念及其功能 AngularJS使用作用域的概念来充当数据模型的作用,在视图和控制器之间起着桥梁的作用.由于双向绑定的数据特性,视图的修改会更新 $scope,同样对 $scope的修改也会重 ...

  7. angularjs的三目运算

    前言:前几天写代码的时候遇到一个问题,有一个按钮,有"已关注"和"+关注"两种状态,需要对这两种状态的按钮的背景颜色进行区分,单后点击"已关注&quo ...

  8. angularjs笔记(三)

    AngularJS API 7.其他一些常用指令,布尔类型的指令也可以用表达式 (1).数组索引$index <!DOCTYPE html> <html> <head&g ...

  9. AngularJS进阶(三十八)上拉加载问题解决方法

    AngularJS上拉加载问题解决方法 项目中始终存在一个问题:当在搜索栏输入关键词后(见图1),按照既定的业务逻辑应该是服务端接收到请求后,首先返回查询的前7条数据,待客户端出现上拉加载时,继续查找 ...

随机推荐

  1. Css_button样式对不齐

    发现了是按钮的vertical-align式样,统一显示的设置为middle,搞定.

  2. Monkey基本使用

    什么是 Monkey Monkey 是一个 Android 自动化测试小工具.主要用于Android 的压力测试, 主要目的就是为了测试app 是否会Crash. Monkey 特点 顾名思义,Mon ...

  3. PAT甲题题解-1023. Have Fun with Numbers (20)-大数加法

    和1024一样都是大数据的题,因为位数最多要20位,long long最多19位给一个num,求sum=num+num问sum包含的数字,是否是num的一个排列,即数字都一样,只是顺序不同罢了. #i ...

  4. 20135202闫佳歆--week3 课本1-2章学习笔记

    第一章 Linux内核简介 一.Unix Unix是一个强大.健壮和稳定的操作系统. 简洁 绝大部分东西都被当做文件对待.这种抽象使对数据和对设备的操作都是通过一套相同的系统调用借口来进行的:open ...

  5. 审评（HelloWorld团队）

    炸弹人:我觉得炸弹人的构想很不错,很像以前玩的qq堂,不过上课时讲的不够深入,我没有找到项目的思路,项目的介绍也很粗糙,后面说的目标很大,希望你可以实现,我觉得越多的功能,就意味着越多的工作量,总的来 ...

  6. Java实现模拟登录新浪微博

    毕设题目要使用到新浪微博数据,所以要爬取新浪微博的数据.一般而言,新浪微博的爬虫有两种模式:新浪官方API和模拟登录新浪微博.两种方法的异同点和适用情况就无须赘述了.前辈的文章已经非常多了.写这篇文章 ...

  7. c#程序阅读分析

    using System; using System.Collections.Generic; using System.Text; namespace FindTheNumber { class P ...

  8. UART协议总结

    之前一直使用UART作为单片机之间以及和计算机的简单通信,但一直没有研究过该协议的内部原理.今天刚买了一个逻辑分析仪,于是使用该分析仪对UART数据进行分析,以便更好的理解UART协议原理. UART ...

  9. 各小组Alpha版项目发布作品点评

    第一组:新蜂小组 题目:俄罗斯方块 评论:主体功能已经完成,可以流畅的进行游戏,游戏素材都是由贴图美化过的,期待计分系统等的完善. 第二组:天天向上 题目:连连看 评论:核心功能完成,可以流畅的进行游 ...

  10. [转帖]ESXi 网卡绑定 增加吞吐量的方法

    VMware ESX 5.0 网卡负载均衡配置3种方法 http://blog.chinaunix.net/uid-186064-id-3984942.html (1) 基于端口的负载均衡 (Rout ...