<!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遍历增删