今天使用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. Lock同步锁--线程同步

    Lock-同步锁 Lock是java5提供的一个强大的线程同步机制--通过显示定义同步锁对象来实现同步.Lock可以显示的加锁.解锁.每次只能有一个线程对lock对象加锁. Lock有ReadLock ...

  2. 使用eclipse开发android准备工作

    1.官网下载JDK  http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html    (注 ...

  3. iOS开发之多媒体API （转载）

    视频格式可以分为适合本地播放的本地影像视频和适合在网络中播放的网络流媒体影像视频两大类.尽管后者在播放的稳定性和播放画面质量上可能没有前者 优秀,但网络流媒体影像视频的广泛传播性使之正被广泛应用于视频 ...

  4. C语言中的循环结构与选择结构

    1. 为什么使用循环? 重复执行某段代码 2. while(条件){ 循环体: } 当条件成立的时候就执行循环体,条件不成立,就退出循环,继续执行while后面的语句 3. for ( 初始表达式 : ...

  5. zend studio 9.0.4 破解、汉化和字体颜色及快捷键相关设置

    转载:http://www.penglig.com/post-45.html 下载:http://www.geekso.com/component/zendstudio-downloads/ 破解:h ...

  6. zend studio 8 修字体和大小

    第一步:进入设置窗口    windows -> preferences 第二步:进入修改字体的选项卡.    General -> Appearance -> Colors and ...

  7. html常用的综合体

    clip:rect(20px 100px 50px 20px); clip属性中的rect,clip:rect(y1 x2 y2 x1)参数说明如下: y1=定位的y坐标(垂直方向)的起点 x1=定位 ...

  8. 面试问题4：C语言预处理包括哪些

    问题描述:C语言 预处理包括哪些操作 C语言的三种预处理包括:宏定义(#define).文件包含(#include).条件编译(#if.#else.#endif). 对于宏定义的介绍: 宏定义必须写在 ...

  9. Git详解之三 Git分支

    相关文档 — 更多 Git 基础培训.ppt GIT 使用经验.ppt GIT 介绍.pptx GIT 分支管理是一门艺术.docx Eclipse上GIT插件EGIT使用手册.docx git/gi ...

  10. C#中==与Equals方法的区别

    using System;using System.Collections.Generic;using System.Linq;using System.Text; namespace Console ...