1. <!DOCTYPE html>
  2. <html lang="zh_CN">
  3.  <head>
  4.   <title>字数小例子</title>
  5.  </head>
  6.  <body ng-app="noCntAPP">
  7.   <div ng-controller="noCntCtrl">
  8.     <h2>我的笔记</h2>
  9.     <textarea cols="30" rows="10" ng-model="txtArea"></textarea>
  10.  
  11.     <p><button>读取</button>
  12.     <button>提交</button>
  13.     <button>撤销</button>
  14.     <p>剩余字数: {{getCount()}}</p>
  15.     </p>
  16.   <div>
  17.   <script type="text/javascript" src="./angular.js"></script>
  18.   <script type="text/javascript">
  19.     angular.module('noCntAPP',[])
  20.            .controller('noCntCtrl',['$scope',function($scope){
  21.                 $scope.txtArea=''; // 初始化文本区域值为空串
  22.                 $scope.getCount=function(){
  23.                    return 100 - $scope.txtArea.length;
  24.                 }
  25.           }]);
  26.   </script>
  27.  </body>
  28. </html>

剩余字数小例子

  1. <!DOCTYPE html>
  2. <html lang="zh_CN">
  3.  <head>
  4.   <title>字数小例子</title>
  5.  </head>
  6.  <body ng-app="noCntAPP">
  7.   <div ng-controller="noCntCtrl">
  8.     <h2>我的笔记</h2>
  9.     <textarea cols="30" rows="10" ng-model="txtArea"></textarea>
  10.  
  11.     <p><button>读取</button>
  12.     <button>提交</button>
  13.     <button>撤销</button>
  14.     <p>剩余字数: {{getCount()}}</p>
  15.     </p>
  16.   <div>
  17.   <script type="text/javascript" src="./angular.js"></script>
  18.   <script type="text/javascript">
  19.     angular.module('noCntAPP',[])
  20.            .controller('noCntCtrl',['$scope',function($scope){
  21.                 $scope.txtArea=''; // 初始化文本区域值为空串
  22.                 $scope.getCount=function(){
  23.                    if($scope.txtArea.length>100){
  24.                    $scope.txtArea = $scope.txtArea.slice(0,100); // 超过 100 截取前 0-99 个字符
  25.                 }
  26.                    return 100 - $scope.txtArea.length;
  27.                 }
  28.           }]);
  29.   </script>
  30.  </body>
  31. </html>

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

  1. <!DOCTYPE html>
  2. <html>
  3.  <head>
  4.   <title>数据存储演示</title>
  5.  </head>
  6.  <body ng-app="storageApp">
  7.   <div ng-controller="storageCtrl">
  8.     <h2>我的笔记</h2>
  9.     <textarea cols="30" rows="10" ng-model="note">
  10.  
  11.     </textarea>
  12.     <p>
  13.      <button ng-click="save()">保存</button>
  14.      <button ng-click="read()">读取</button>
  15.      <button ng-click="truncate()">清空</button>
  16.     </p>
  17.     <p>{{getRestCount()}}</p>
  18.     <script type="text/javascript" src="./angular.js"></script>
  19.     <script type="text/javascript">
  20.        angular.module('storageApp',[])
  21.               .controller('storageCtrl',['$scope',function($scope){
  22.         $scope.note=''; //初始化笔记为空串
  23.             $scope.getRestCount=function(){
  24.             if($scope.note.length>100){
  25.                 $scope.note=$scope.note.slice(0,100); // 若输入大于100个字符则截取前100个字符
  26.                 return 100 - $scope.note.length;
  27.             }
  28.         }
  29.            $scope.save=function(){
  30.             alert('note is saved!');
  31.             localStorage.setItem("note_key",JSON.stringify($scope.note)); //转成json串保存到本地存储
  32.              $scope.note='';
  33.         }
  34.          $scope.read=function(){
  35.             $scope.note = JSON.parse(localStorage.getItem('note_key') || '[]'); //处理为 null 的情况
  36.         }
  37.                 $scope.truncate=function(){
  38.                   localStorage.removeItem('note_key');
  39.             $scope.note='';
  40.         }
  41.     }])
  42.     </script>
  43.   </div>
  44.  </body>
  45. </html>
  1. <!DOCTYPE html>
  2. <html>
  3.  <head><title>备忘示例代码</title></head>
  4.  <body ng-app="topAPP">
  5.  
  6.   <div ng-controller="noteCtrl">
  7.      <h2>我的备忘</h2>
  8.      <p><input type="text" ng-model="newHabit"/><button ng-click="add()">新增</button></p>
  9.      <div ng-repeat="habit in habits">
  10.        <input type="checkbox" ng-model="habit.isChecked"/>
  11.        <span>{{habit.habit}}</span>
  12.      </div>
  13.      <p><button ng-click="del()">删除选中项</button></p>
  14.   <div>
  15.   <script src="./angular.js"></script>
  16.   <script>
  17.    angular.module('topAPP',[])
  18.           .controller('noteCtrl',['$scope',function($scope){
  19.         $scope.habits=[{habit:'吃饭',isChecked:false},{habit:'睡觉',isChecked:true},{habit:'打豆豆',isChecked:false}];
  20.                 $scope.add=function(){
  21.                         console.log($scope.newHabit);
  22.             if(!$scope.newHabit){
  23.                 alert("输入不能为空!");
  24.                 return;
  25.             }
  26.             var newObj={
  27.                 habit:$scope.newHabit,
  28.                 isChecked:false
  29.             };
  30.              $scope.habits.unshift(newObj);
  31.                         $scope.newHabit='';
  32.         };
  33.         $scope.remove=function(){
  34.              $scope.habits.forEach(function(item,index){
  35.                 if(item.isChecked){
  36.                     $scope.habits.splice(index,1);
  37.                     $scope.remove();// 递归防止连续index勾选
  38.                 }
  39.             });
  40.         };
  41.         $scope.del=function(){
  42.             //逆向思维,仅显示未勾选的
  43.             var oldHabits=$scope.habits;
  44.             $scope.habits=[];// 新建一个空数组
  45.                         oldHabits.forEach(function(item,index){
  46.                 if(!item.isChecked){
  47.                     $scope.habits.push(item);
  48.                 }
  49.             });
  50.         }
  51.      }]);
  52.   </script>
  53.  </body>
  54. </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. Unity利用SMSSDK实现短信验证码（附代码）

    最近一直在研究如何给app更多实用性的功能,在app进行登录或者注册时,为了方便用户更加快捷的完成登录功能,所以就决定采用短信验证码的方式进行验证登录.在学习的过程中,先使用了Mob的短信服务进行短信 ...

  2. 部署jar项目常用命令

      netstat -tunlp | grep  ××   查询出端口为××在运行应用的线程ip   kill -9  ××     关闭线程ip 为 ××的应用   rm  -f  ××.jar  ...

  3. PAT甲题题解-1052. Linked List Sorting (25)-排序

    三个注意点: 1.给出的n个节点并不一定都在链表中 2.最后一组样例首地址即为-1 3.输出地址的时候一直忘记前面要补0... #include <iostream> #include & ...

  4. 20135234mqy-——信息安全系统设计基础第十二周学习总结

    process environ.c environvar.c consumer.c 管道写端 producer.c 管道读端 testmf.c listargs.c pipedemo.c 管道 pip ...

  5. 项目复审——Beta阶段

    排名原则还是基于这个组到底自己做了多少东西,又借鉴了多少东西,不过其他组的具体情况我也不一定说的清楚,所以只是通过大家的码云和一些了解来评判的.当然,是否发布也是一个重要指标.顺便感叹一句,现在的云平 ...

  6. RYU 灭龙战 first day

    RYU 灭龙战 first day 前言 由于RYU翻译过来是龙的意思,此次主题就叫灭龙战吧 灵感来源 恶龙的三位真火-问题所在 参照了官方文档的基本操作 笔者以此执行 一个终端里 sudo mn - ...

  7. Linux用户和用户组管理

    该内容来摘自于鸟叔的Linux私房菜. Linux的每个用户包含两个ID,一个是用户ID,一个是用户组ID.系统会根据/etc/passwd和/etc/group的设定来决定用户的访问权限.下面对用户 ...

  8. [财务知识]IFRS9

    浅谈IFRS9 2018-07-10 23:15信用/收益 原创申明 本文原创作者为金融监管研究院助理研究员李健,未经授权谢绝转载.引用.抄袭. 引言 2018年6月6日,财政部会计司发布了“关于就& ...

  9. SOA,SOAP,RPC,以及 RPC协议与 REST 协议之间的关系(搜狗)

    web service顾名思义这是一种提供service的形式,而且只能通过http(web)来提供service(web service三要素:SOAP.WSDL(WebServicesDescri ...

  10. PHP从入门到精通

    php基本语法 1.变量类型 a.标量类型 bool integer float string b.复合类型 array object c.特殊类型 resource null d.伪类型 mixd ...