今天使用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>

angular留言板的更多相关文章

  1. angular实现动态的留言板案例

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...

  2. AngularJs学习笔记（制作留言板）

    原文地址:http://www.jmingzi.cn/?post=13 初学Anjularjs两天了,一边学一边写的留言板,只有一级回复嵌套.演示地址 这里总结一下学习的过程和笔记.另外,看看这篇文章 ...

  3. dd——留言板再加验证码功能

    1.找到后台-核心-频道模型-自定义表单 2.然后点击增加新的自定义表单 diyid 这个,不管他,默认就好 自定义表单名称 这个的话,比如你要加个留言板还是投诉建议?写上去呗 数据表  这个不要碰, ...

  4. asp.net留言板项目源代码下载

    HoverTree是一个asp.net开源项目,实现了留言板功能. 前台体验网址:http://hovertree.com/guestbook/ 后台请下载源代码安装. 默认用户名:keleyi 默认 ...

  5. html的留言板制作（js）

    这次留言板运用到了最基础的localstorage的本地存储,展现的效果主要有: 1.编写留言2.留言前可以编辑自己的留言昵称.不足之处: 1.未能做出我喜欢的类似于网易的叠楼功能. 2.未能显示评论 ...

  6. 11月8日PHP练习《留言板》

    一.要求 二.示例页面 三.网页代码及网页显示 1.denglu.php  登录页面 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Tran ...

  7. [课程设计]Scrum 3.7 多鱼点餐系统开发进度（留言板选择方案）

    Scrum 3.7 多鱼点餐系统开发进度(留言板选择方案) 1.团队名称:重案组 2.团队目标:长期经营,积累客户充分准备,伺机而行 3.团队口号:矢志不渝,追求完美 4.团队选题:餐厅到店点餐系统W ...

  8. [课程设计]Scrum 3.6 多鱼点餐系统开发进度（用户测试反馈页面构思&留言板设计）

    Scrum 3.6 多鱼点餐系统开发进度(用户测试反馈页面构思&留言板设计) 1.团队名称:重案组 2.团队目标:长期经营,积累客户充分准备,伺机而行 3.团队口号:矢志不渝,追求完美 4.团 ...

  9. 用 Express4 写一个简单的留言板

    Knowledge Dependence:阅读文本前,你需要熟悉 Node.js 编程.Express 以及相关工具和常用中间件的使用. Node.js 以其单线程异步非阻塞的特点,越来越被广大的 W ...

随机推荐

  1. 我理解的OAuth 1.0a 的验证过程

    故事梗概: 淘宝店主糖糖在京郊仓库存了一批大白兔奶糖,为了防止仓库钥匙被偷把仓库的钥匙交给了专业的钥匙保管员公司. 糖糖卖了一斤大白兔需要快递公司的小迪送货.快递员小迪找钥匙保管公司借钥匙,然后去京郊 ...

  2. 关于SharPoint2013一点细节的深究

    在进行SharePoint2013的开发过程中我发现在开启了某些功能,或者说是创建了个人站点之后有很多地方变了比如下面这个地方:     当然相应的URL地址也发生改变.也许很明确的我就打开了Welc ...

  3. oracle中Window和Window Group

    参考文献: http://www.5ienet.com/note/html/scheduler/oracle-scheduler-using-window.shtml window概念 此Window ...

  4. Servlet基础（二） Servlet的生命周期

    Servlet基础(二) Servlet的生命周期 Servlet的生命周期可以分为三个阶段: 1.初始化阶段 2.响应客户请求阶段 3.终止阶段 Servlet的初始化阶段 在下列时刻Servlet ...

  5. Android点击空白处，隐藏软键盘

    在做登陆或者注册的时候,软键盘经常可能会挡住一些界面.我们需要在输入完成之后隐藏软键盘. 在我们点击空白处或者非EditText的地方来隐藏软键盘. public class HomeActivity ...

  6. 学习 jsonp

    1.起因 js脚本做ajax异步调用的时候,直接请求普通文件存在跨域无权限访问的问题,不管你是静态页面.动态网页.web服务,只要是跨域请求,都无法成功: 如果上句话没明白,我们直接看例子.有两个一模 ...

  7. 【转】Android开发之如何保证Service不被杀掉（broadcast+system/app）

    Service简介 1.Service 每个Service必须在manifest中 通过<service>来声明. 可以通过contect.startservice和contect.bin ...

  8. 结对编程-地铁续（有种上个学期OO的既视感）

    我们组比较特殊..三人结对 github:https://github.com/qingchanghan/WPFUI_Metro po一张照片: 石浩然,韩青长.陈彦吉 (台式机真的很高端,分屏贼帅) ...

  9. db2简单语句记录

    db2start db2 connect reset 断开连接 db2 drop db xxx 删除数据库 db2 list tables 查看表 db2 create database xxx 建立 ...

  10. yii2 数据导出 excel导出以及导出数据时列超过26列时解决办法

    作者:白狼 出处:http://www.manks.top/article/yii2_excel_extension​ 本文版权归作者,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给 ...