<!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>