angularjstest5.html
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>angularjs练习</title> <script src="https://cdn.staticfile.org/angular.js/1.5.5/angular.min.js"></script> <script src="app1.js"></script> <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="delete()">删除</button> </div> <p>剩余的字数:{{getCount()}}</p> </div> <script type="text/javascript"> </script> </body> </html>
app1.js
angular.module("myApp", [])
.controller("myCtrl", ["$scope", function ($scope) {
//解决初始化message
$scope.message = ''; //''.length为0
$scope.getCount = function () {
// console.log($scope.message);
if ($scope.message.length > 100) {
// $scope.message = $scope.message.substring(0,100);
$scope.message = $scope.message.slice(0, 100);
return 0;
}
return 100 - $scope.message.length;
};
$scope.save = function () {
localStorage.setItem("note_a", JSON.stringify($scope.message));
alert("note_a have save!");
$scope.message = '';
};
$scope.read = function () {
//if (localStorage.getItem("note_a") != null) {
// $scope.message = JSON.parse(localStorage.getItem("note_a")); //note_a如果是空的，返回null,null.length会报错
//}
$scope.message = JSON.parse(localStorage.getItem("note_a") || '[]');
};
$scope.delete = function () {
$scope.message = '';
}
}])
angularjstest6.html
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>angularjstest6练习</title> <script src="https://cdn.staticfile.org/angular.js/1.5.5/angular.min.js"></script> <script src="app2.js"></script> </head> <body ng-app="myApp"> <div ng-controller="myCtrl"> <h2>我的备忘录</h2> <div> <input type="text" ng-model="newTodo" /> <button ng-click="add()">添加</button> </div> <div ng-repeat="todo in todos"> <input type="checkbox" ng-model="todo.isChecked" /> <span>{{todo.name}}</span> </div> <button ng-click="deletetTodo()">删除选中的记录</button> </div> </body> </html>
app2.js
angular.module("myApp", [])
.controller("myCtrl", ["$scope", function ($scope) {
$scope.todos = [
{ name: '吃饭', isChecked: false },
{ name: '睡觉', isChecked: true },
{ name: '打豆豆', isChecked: false }
];
//定义添加的方法
$scope.add = function () {
var t = { name: $scope.newTodo, isChecked: false };
//判断用户输入的数据是否合法
if (!$scope.newTodo) {
alert("用户输入的数据不能为空");
return;
}
// $scope.todos.push(t); //添加到数组的末尾
$scope.todos.unshift(t); //添加到数组的最前面
$scope.newTodo = '';
};
//定义删除的方法
//$scope.deletetTodo = function () {
// //留下未选中的
// var oldTodos = $scope.todos;
// $scope.todos = [];
// oldTodos.forEach(function (item, index) {
// if (!item.isChecked) {
// $scope.todos.push(item);
// }
// });
//}
//定义删除的方法第二种方式
$scope.deletetTodo = function () {
for (var item in $scope.todos) { //item代表数组的索引
console.log($scope.todos[item].isChecked);
if ($scope.todos[item].isChecked) {
$scope.todos.splice(item, 1); //删除数组中指定的项
$scope.deletetTodo(); //继续遍历一次，因为索引会改变。提倡用上面的方法
}
}
}
}])