(复制粘贴即可使用)
(于“菜鸟教程”学完AngularJs,在它实例的基础上添加个人的想法。菜鸟教程实例网址:http://www.runoob.com/try/try.php?filename=try_ng_todo_app&basepath=0 )
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>备忘录</title> <style> div{ margin-bottom: 15px; } .pullLeft{ float: left; } .clearfix{ clear: both; overflow: hidden; _zoom:1; } table td{ padding: 5px; } </style> <script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script> </head> <body> <div ng-app="myApp" ng-controller="myCtrl" ng-cloak> <div>时间:<input type="date" ng-model="infoTime" placeholder="请选择时间"></div> <div class="clearfix"> <span class="pullLeft">内容:</span> <textarea class="pullLeft" cols="30" rows="10" placeholder="请输入备忘内容" ng-model="infoText" maxlength="100"></textarea> <div class="clearfix">   <small>还可以输入 <span ng-bind="WordNumFun()"></span> 个字</small></div> </div> <div> <button type="button" ng-click="addInfo()" ng-show="AddInfoShow">添加至备忘录</button> <button type="button" ng-click="EditSave()" ng-show="EditSaveShow">保存修改</button> <span style="color: red"> <strong ng-if="tipsShow" ng-bind="tipsShowFun()"></strong> </span> </div> <table> <tr ng-repeat="item in infoList | orderBy:'time' "> <td>{{$index + 1}}</td> <td><input type="checkbox" ng-model="item.done"></td> <td> <span ng-bind="item.time"></span>: <span ng-bind="item.text"></span> </td> <td> <button type="button" ng-click="editInfo($index)">修改记录</button> </td> </tr> </table> <button type="button" ng-if="deleteShow" ng-click="deleteInfo()">删除记录</button> </div> </body> <script> angular.module('myApp',[]).controller('myCtrl', function ($scope) { $scope.infoList = []; $scope.deleteShow = false; $scope.infoTime = new Date(); $scope.infoText = ''; $scope.tipsShow = false; $scope.WordNum = 100; $scope.AddInfoShow=true; $scope.EditSaveShow = false; //清空输入内容 $scope.clearContent = function(){ $scope.infoText = ''; $scope.infoTime = new Date(); }; //数字计算 $scope.WordNumFun=function(){ return $scope.WordNum - Number($scope.infoText.length); }; //为空提示 $scope.tipsShowFun = function(){ if($scope.infoText.length !== 0){ $scope.tipsShow = false; }else{ $scope.tipsShow = true; return '请先填写内容,再添加 (*^▽^*)~~'; } }; //删除记录 按钮的显示隐藏 $scope.deleteShowFun = function(){ $scope.infoList.length == 0? $scope.deleteShow = false: $scope.deleteShow = true; }; //时间格式转换:时间戳→具体时间 var yyyy, mm, dd, times; $scope.timeFormat = function(){ yyyy = $scope.infoTime.getFullYear(); mm =(Number( $scope.infoTime.getMonth()) + 1) < 10 ? '0'+(Number( $scope.infoTime.getMonth()) + 1): (Number( $scope.infoTime.getMonth()) + 1); dd = ($scope.infoTime.getDate()) < 10 ? '0'+($scope.infoTime.getDate()):($scope.infoTime.getDate()); times = yyyy+'-'+mm+'-'+dd; }; //时间格式转换: 具体时间→时间戳 $scope.dateFormat = function(date){ $scope.infoTime = new Date(date); }; //添加至备忘录 $scope.addInfo = function () { if($scope.infoText.length !== 0){ $scope.timeFormat(); $scope.infoList.push({done: false, time: times, text: $scope.infoText}); $scope.deleteShowFun(); $scope.clearContent(); } else{ return $scope.tipsShow = true; } }; //删除记录 $scope.deleteInfo = function () { for(var i = $scope.infoList.length - 1; i >= 0; i--){ if( $scope.infoList[i].done ==true){ $scope.infoList.splice(i, 1); } } $scope.deleteShowFun(); }; //修改记录 var EditId; $scope.editInfo = function (data) { EditId = data; $scope.infoText = $scope.infoList[data].text; $scope.dateFormat($scope.infoList[data].time); $scope.AddInfoShow=false; $scope.EditSaveShow = true; }; //保存修改 $scope.EditSave = function () { $scope.infoList[EditId].text = $scope.infoText; $scope.timeFormat(); $scope.infoList[EditId].time = times; $scope.AddInfoShow=true; $scope.EditSaveShow = false; $scope.clearContent(); }; }) </script> </html>