今天使用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: 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(,,,0.8);
text-align:center;
font:20px/40px '微软雅黑';
margin: auto;
}
.message{
width: 600px;
height: 100px;
background:rgba(,,,0.8);
margin: 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,);
localStorage.clear();
};
//增加键盘回车提交功能，当全部输入后可以在最后一个输入位置按回车提交
$scope.keyup=function(){
if(ev.keyCode==){
//当回车的时候条用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="" rows="" 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>