今天使用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. Vault 不同版本的API的异同

    大家知道,Autodesk Vault 2014有几个版本,依次为( Basic, Workgroup, Professional),不同版本的功能不相同,关于Vault产品功能的不同之处可以在Vau ...

  2. phonegap + Framework7 之 ios 推送跳转测试

    先说说项目情况:使用phonegap创建的ios项目,然后在使用html + css开发网页中又使用了一个框架Framework7(Framework7是一个构建仿原生ios和android应用的框架 ...

  3. 【代码笔记】iOS-浇花动画

    一,效果图. 二,工程图. 三,代码. RootViewController.h #import <UIKit/UIKit.h> @interface RootViewController ...

  4. iOS 学习 - 14.本地联系人

    苹果在iOS9的SDK中废除了AddressBookUI.framework的一些功能(是不是这个库都废除了,有待验证),具体和保存联系人相关的几个系统界面如下:联系人选择:AddressBookUI ...

  5. iOS-字符属性NSAttributedString描述

    /* 字符属性 字符属性可以应用于 attributed string 的文本中. NSString *const NSFontAttributeName;(字体) NSString *const N ...

  6. 敏捷软件开发（4）--- TEMPLATE METHOD & STRATEGY 模式

    1.TEMPLATE METHOD 泛型,也就是这个模式,是可以基于泛型的. 我们往往会有一些算法,比如排序算法.它的算法部分,我可以把它放在一个基类里面,这样具体类型的比较可以放在子类里面. 看如下 ...

  7. JAVA 8 默认方法-Default Methods

    什么是默认方法-Default Methods 简单的说,就是可以在接口中定义一个已实现方法,且该接口的实现类不需要实现该方法: 如下示例: interface GreetingService { v ...

  8. linux下svn命令使用大全(share)

     转自:http://blog.chinaunix.net/uid-22566367-id-1965771.html 1.将文件checkout到本地目录 svn checkout path(path ...

  9. SQL动态列查询

    数据库中为了实现表格数据的自由设置,我们经常设计纵表,或者列定义的表(如下KeyValue),定义一个列超级多的表中每个字段的意义. 但是在设计时简单的东西却很容易被人们忘记,如下一个简单但是很松散的 ...

  10. PostgreSQL模仿Oracle的instr函数

    -- -- instr functions that mimic Oracle's counterpart -- Syntax: instr(string1, string2, [n], [m]) w ...