angular留言板
今天使用angularJs写了一个留言板，简单的享受了下angular处理数据的双向绑定的方便；注释已经都写到行间了
<!DOCTYPE html> <html lang="en" ng-app="text"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="base.css"> <style> .main{ width: 600px; height: 250px; background:#ccc; margin:0 auto; padding:10px; } .main_title{ width: 100px; height: 20px; font:20px/20px '微软雅黑'; margin:5px auto; color:aqua; } input,textarea{ background:#fff; } #sub{ width: 40px; height: 20px; background:skyblue; cursor:pointer; } .none_mes{ width: 620px; height: 40px; background:rgba(146,234,250,0.8); text-align:center; font:20px/40px '微软雅黑'; margin:0 auto; } .message{ width: 600px; height: 100px; background:rgba(146,234,250,0.8); margin:0 auto; padding:10px; } .message .name,.message .job,.message .mes{ height: 20px; width: 620px; } .message .del{ width: 40px; height: 20px; background:orangered; text-align:center; line-height:20px; cursor:pointer; } </style> <script src="angular.js"></script> <script> var app=angular.module('text',[]); app.controller('add_msg',function($scope){ //先清空留言填写处的信息 $scope.data=[]; $scope.username=''; $scope.job=''; $scope.mes=''; //点击确定添加内容 这里只是添加了一个add的方法，在点击确定按钮的时候添加调用事件ng-click模型 $scope.add=function(){ //进行判断，当留言内容齐全的时候允许添加，不全的时候提示用户 if($scope.username && $scope.job && $scope.mes){ $scope.data.push({ username:$scope.username, job:$scope.job, mes:$scope.mes }); //将信息存入到localstorage中 localStorage.username=$scope.username; localStorage.job=$scope.job; localStorage.mes=$scope.mes; //获取到内容后再次清空留言填写处的信息 $scope.username=''; $scope.job=''; $scope.mes=''; }else{ alert('请填写全部内容'); } }; //点击删除的时候，因为data为数组，删除当前数组这一项就可以，$index为索引， $scope.delete=function(index){ $scope.data.splice(index,1); localStorage.clear(); }; //增加键盘回车提交功能，当全部输入后可以在最后一个输入位置按回车提交 $scope.keyup=function(){ if(ev.keyCode==13){ //当回车的时候条用add函数 this.add(); } }; }); </script> </head> <body style="color:#000" ng-controller="add_msg"> <div class="main" > <div class="main_title">留言板</div> <div> <span class="name">姓名</span><input type="text" name="" ng-model="username"> <span class="name">所属公司</span><input type="text" name="" ng-model="job"> <div class="name">留言内容</div> <textarea name="" cols="30" rows="10" ng-model="mes" ng.keyup="keyup($event)"></textarea><br /> <input type="button" value="确定" id="sub" ng-click="add()"> </div> </div> <div class="none_mes" ng-show="data.length==0">暂无留言</div> <!--item in data angular里的循环样式 在需要内容的地方加相应的值。--> <div class="message" ng-repeat="item in data"> <ul> <li class="name">姓名：{{item.username}}</li> <li class="job">公司：{{item.job}}</li> <li class="mes">留言内容：{{item.mes}}</li> <li class="del" ng-click="delete($index)">删除</li> </ul> </div> </body> </html>
