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(); //继续遍历一次,因为索引会改变。提倡用上面的方法 } } } }])