今天使用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. 自定义JSP标签库及Properties使用

    自定义JSP标签库及Properties使用 自定义JSP标签 自定义JSP标签技术是在JSP 1.1版本中才出现的,它支持用户在JSP文件中自定义标签,这样可以使JSP代码更加简洁. 这些可重用的标 ...

  2. 在android用Get方式发送http请求

    烦人的日子终于过去啦,终于又可以写博客啦,对自己的android学习做个总结,方便以后查看...... 一.在android用Get方式发送http请求,使用的是java标准类,也比较简单. 主要分以 ...

  3. Android的系统属性SystemProperties

    创建与修改android属性用Systemproperties.set(name, value) 获取android属性用Systemproperties.get(name) 注意:android属性 ...

  4. iOS 更改webView文字颜色丶文字大小丶背景色的方法

    在webView的delegate回调方法    - (void)webViewDidFinishLoad:(UIWebView *)webView;中写上一下语句即可 //字体大小 [webView ...

  5. Xcode插件

    Xcode插件-2016-03-10Xcode插件管理神器 —— Alcatraz 说明 Alcatraz是一个管理Xcode开源包的,你可以用它查找安装你想要的插件,模板以及配色方案,而你无需手动克 ...

  6. Android 自定义控件（一）

    本文用一个简单的例子来说明一下自定义控件的步骤实现,自定义控件有几种实现类型,分别为继承自view完全自定义,继承现有的 控件实现特定效果,继承viewgroup实现布局类等: 本文研究的是继承自vi ...

  7. git diff的用法

    在git提交环节,存在三大部分:working tree(工作区), index file(暂存区:stage), commit(分支:master) working tree:就是你所工作在的目录, ...

  8. WPF学习之路（二） XAML

    在WPF中引入了XAML语言,主要用于界面设计,业务逻辑则使用C#实现后台代码,将界面设计与业务逻辑分离 XAML是一种声明式语言,类似XML\HTML 示例: <!--Start Tag--& ...

  9. 关于GUID的相关知识

     全局唯一标识符(GUID,Globally Unique Identifier)是一种由算法生成的二进制长度为128位的数字标识符.GUID主要用于在拥有多个节点.多台计算机的网络或系统中.在理想情 ...

  10. socket学习之聊天室

    服务端 using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; ...