效果展示
源代碼
note.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mynote</title>
<style>
textarea{
resize: none;
}
</style>
</head>
<body ng-app="myApp">
<div ng-controller="MyCtrl">
<h2>我的筆記</h2>
<textarea cols="30" rows="10" ng-model="message">
</textarea>
<div>
<button ng-click="save()">保存</button>
<button ng-click="read()">讀取</button>
<button ng-click="remove()">刪除</button>
</div>
<p>剩餘的字數:{{getCount()}}</p>
</div>
<div ng-controller="MyCtrl2">
<h2>備忘錄</h2>
<div>
<input type="text" ng-model="newItem">
<button ng-click="add()">添加</button>
</div>
<div ng-repeat="todo in todos">
<input type="checkbox" ng-model="todo.isChecked">
<span>{{todo.name}}</span><br/>
</div>
<div>
<button ng-click="del()">刪除選中的記錄</button>
</div>
</div>
<script type="text/javascript" src="../js/angular-1.5.5/angular.js"></script>
<script type="text/javascript" src="app.js"></script>
</body>
</html>
app.js
angular.module('myApp',[])
.controller('MyCtrl',['$scope',function($scope){
//初始化message數據
$scope.message = '';
//計算剩餘字數的方法
$scope.getCount = function(){
//判斷用戶輸入的內容長度
if($scope.message.length>100){
$scope.message = $scope.message.slice(0,100);
}
return 100 - $scope.message.length;
};
//定義保存數據的方法
$scope.save = function(){
alert("note is saved !");
localStorage.setItem('my-data',JSON.stringify($scope.message));
$scope.message = "";
};
//定義讀取數據的方法
$scope.read = function(){
$scope.message = JSON.parse(localStorage.getItem('my-data')||'[]');//如果沒有值則取到null,要處理null的情況
};
//定義刪除數據的方法
$scope.remove = function(){
localStorage.removeItem('my-data');
$scope.message = '';
}
}])
.controller('MyCtrl2',['$scope',function($scope){
$scope.todos = [
{name:'喫飯1',isChecked:false},
{name:'喫飯2',isChecked:false},
{name:'喫飯3',isChecked:false},
]
//定義添加的方法
$scope.add = function(){
//判斷用戶輸入的內容是否合法
if(!$scope.newItem){
alert('輸入的內容不能爲空');
return;
}
//收集整理數據
var obj={
name:$scope.newItem,
isChecked:false
}
$scope.todos.push(obj);
$scope.newItem='';
};
//定義刪除的方法
// $scope.del = function(){
// $scope.todos.forEach(function(item,index){
// //找的選中的todo
// if(item.isChecked){
// $scope.todos.splice(index,1);
// $scope.del();//遞歸
// }
// })
// }
$scope.del = function(){
var oldTodos = $scope.todos;
$scope.todos = [];
oldTodos.forEach(function(item,index) {
if(!item.isChecked){
$scope.todos.push(item);
}
})
}
}]);