AngularJS 启程三
<!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 启程三的更多相关文章
- AngularJS进阶(三十九)基于项目实战解析ng启动加载过程
基于项目实战解析ng启动加载过程 前言 在AngularJS项目开发过程中,自己将遇到的问题进行了整理.回过头来总结一下angular的启动过程. 下面以实际项目为例进行简要讲解. 1.载入ng库 2 ...
- 现在就开始使用AngularJS的三个重要原因
现在就开始使用AngularJS的三个重要原因 在线演示1 本地下载 如果你不熟悉什么是Angular.js的话,小编我强烈推荐你阅读 Javascript教程:AngularJS的五个超酷特性.简单 ...
- angularJS 服务三
路由 一 简介 1.路由机制 为了实现无刷新的视图切换,我们通常会用ajax请求从后台取数据,然后套上HTML模板渲染在页面上,然而ajax的一个致命缺点就是导致浏览器后退按钮失效,尽管我们可以在页面 ...
- 使用AngularJS的三个重要原因
入门教程:http://www.ituring.com.cn/minibook/303 : http://angularjs.cn/tag/AngularJS 原因一:Google开发的框架 要知道开 ...
- 精通AngularJS（三）深入scope，继承结构，事件系统和生命周期
深入探讨 Scope 作用域 每一个 $scope 都是类 Scope 的一个实例.类 Scope 拥有可以控制 scope 生命周期的方法,提供事件传播的能力,并支持模板渲染. 作用域的层次结构 让 ...
- AngularJS 第三天----作用域
作用域的概念及其功能 AngularJS使用作用域的概念来充当数据模型的作用,在视图和控制器之间起着桥梁的作用.由于双向绑定的数据特性,视图的修改会更新 $scope,同样对 $scope的修改也会重 ...
- angularjs的三目运算
前言:前几天写代码的时候遇到一个问题,有一个按钮,有"已关注"和"+关注"两种状态,需要对这两种状态的按钮的背景颜色进行区分,单后点击"已关注&quo ...
- angularjs笔记(三)
AngularJS API 7.其他一些常用指令,布尔类型的指令也可以用表达式 (1).数组索引$index <!DOCTYPE html> <html> <head&g ...
- AngularJS进阶(三十八)上拉加载问题解决方法
AngularJS上拉加载问题解决方法 项目中始终存在一个问题:当在搜索栏输入关键词后(见图1),按照既定的业务逻辑应该是服务端接收到请求后,首先返回查询的前7条数据,待客户端出现上拉加载时,继续查找 ...
随机推荐
- vue基础项目安装教程
安装node.js 从node.js官网下载并安装node,安装过程很简单,一路“下一步”就可以了. 安装完成之后,打开命令行工具,输入 node -v,如下图,如果出现相应的版本号,则说明安装成功. ...
- ECS centos7 使用外部邮件服务商的465加密端口
ECS centos7 使用外部邮件服务商的465加密端口发送邮件. 1.修改/etc/mail.rc 文件中添加以下的 set smtp="smtps://smtp.163.com:465 ...
- thinkphp3.2 批量添加数据
这是我遇到的thinkphp3.2 当中最让我无语的坑 批量添加数据有个方法是 addAll() 这个方法一定要注意数组的键名,一定要整齐!!! 可以在存入数据前,用ksort()方法将数组的键名排序 ...
- Linux第二章读书笔记
1.获取内核源码 1.1Git 分布式的:下载和管理Linux内核源代码: - 获取最新提交到版本树的一个副本 $ git clone git://git.kernel.org/pub/scm/lin ...
- 2017-2018-2 1723《程序设计与数据结构》第三周作业 & 实验一 总结
作业地址 第三周作业:https://edu.cnblogs.com/campus/besti/CS-IMIS-1723/homework/1667 提交情况如图: 实验一:https://edu.c ...
- C++ Makefile文件编写
对现有的一个C++动态库文件和调用程序,分别编写Makefile文件,从零开始,这里把自己弄明白的一些东西分享给大家. 1.必须明确Linux下,C++的编译器是g++,C语言的是gcc.网上大多数又 ...
- [Delphi]实现使用TIdHttp控件向https地址Post请求[转]
开篇:公司之前一直使用http协议进行交互(比如登录等功能),但是经常被爆安全性不高,所以准备改用https协议.百度了一下资料,其实使用IdHttp控件实现https交互的帖子并不少,鉴于这次成功实 ...
- Linux命令（二十） 显示系统内存状态 free
一.命令简介 free 命令会显示内存的使用情况,包括实体内存,虚拟的交换文件内存.共享内存区段,以及系统核心使用的缓冲区等. 二.参数说明 -b 以Byte为单位显示内存使用情况 -K 以KB为单位 ...
- [转帖]2019 简易Web开发指南
2019 简易Web开发指南 2019年即将到来,各位同学2018年辛苦了. 不管大家2018年过的怎么样,2019年还是要继续加油的! 在此我整理了个人认为在2019仍是或者将成为主流的技术 ...
- Docker inside Docker 基于 Alpine Linux
Study From https://hub.docker.com/_/docker/ 感慨一句 这些人真牛B .. 简单测试 拉取镜像 docker pull docker:dind 运行镜像 do ...