今天使用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. Android Handler机制(四)---Handler源码解析

    Handler的主要用途有两个:(1).在将来的某个时刻执行消息或一个runnable,(2)把消息发送到消息队列. 主要依靠post(Runnable).postAtTime(Runnable, l ...

  2. Android 播放在线视频

    首先开启电脑上的tomcat,将视频文件放在Tomcat 7.0\webapps\ROOT中 不用修改代码,直接输入地址即可,运行如下: 播放在线视频,必须要求手机支持当前的格式,才可以播放 播放的原 ...

  3. android fragment 的用法以及与activity的交互和保存数据的方法，包括屏幕切换(转载)！

    转载请标明出处:http://blog.csdn.net/lmj623565791/article/details/37992017 1.管理Fragment回退栈 类似与Android系统为Acti ...

  4. 巧用Xode中的代码块(转)

    在我们编码的过程中,总会发现有一些重复的编码工作,可能你会不厌其烦的去copy and paste,但是你有去考虑过怎样解决这样的问题吗?其实现在很多的编程IDE都能帮助我们减少一些编码的任务,提高编 ...

  5. rabbitmq_management 安装失败

    安装rabbitmq_management的时候出现错误 不能连接rabbit,所以查看状态 看意思感觉好像是rabbit没有运行,但是安装的时候都是默认安装的,所以安装完以后服务的名字就是Rabbi ...

  6. js中Prototype属性解释及常用方法

    1.prototype的定义 javascript中的每个对象都有prototype属性,Javascript中对象的prototype属性的解释是:返回对象类型原型的引用. 每一个构造函数都有一个属 ...

  7. C# 得到sqlserver 数据库存储过程,触发器,视图,函数 的定义

    经常从 生产环境 到测试环境, 需要重新弄一整套的数据库环境, 除了表结构以及表结构数据,可以用动软代码生成器 生成之外, 像 存储过程,触发器,等,好像没有批量操作的,意义哥哥农比较麻烦, 所以最近 ...

  8. SSRS报表连接超时的问题

    这段时间遇到一个问题就是ReportService 中采用了远程连接的报表偶尔会断开连接,导致报表导出异常,查阅了很多资料,几天来就是断断续续的终于解决了这个问题,下面把一些解决的点一一展示出来,便于 ...

  9. NGINX高性能Web服务器详解(读书笔记)

    原文地址:NGINX高性能Web服务器详解(读书笔记) 作者:夏寥寥 第4章  Nginx服务器的高级配置 4.1 针对IPv4的内核7个参数的配置优化 说明:我们可以将这些内核参数的值追加到Linu ...

  10. WEB压力测试

    原文地址:WEB压力测试 作者:鸟哥のlinux webbench最多可以模拟3万个并发连接去测试网站的负载能力,个人感觉要比Apache自带的ab压力测试工具好,安装使用也特别方便. 1.适用系统: ...