zoukankan      html  css  js  c++  java
  • angular留言板

    今天使用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{
                 600px;
                height: 250px;
                background:#ccc;
                margin:0 auto;
                padding:10px;
            }
            .main_title{
                 100px;
                height: 20px;
                font:20px/20px '微软雅黑';
                margin:5px auto;
                color:aqua;
            }
            input,textarea{
                background:#fff;
            }
            #sub{
                 40px;
                height: 20px;
                background:skyblue;
                cursor:pointer;
            }
            .none_mes{
                 620px;
                height: 40px;
                background:rgba(146,234,250,0.8);
                text-align:center;
                font:20px/40px '微软雅黑';
                margin:0 auto;
            }
            .message{
                 600px;
                height: 100px;
                background:rgba(146,234,250,0.8);
                margin:0 auto;
                padding:10px;
            }
            .message .name,.message .job,.message .mes{
                height: 20px;
                 620px;
            }
            .message .del{
                 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,1);
                        localStorage.clear();
                    };
                    //增加键盘回车提交功能,当全部输入后可以在最后一个输入位置按回车提交
                    $scope.keyup=function(){
                        if(ev.keyCode==13){
                            //当回车的时候条用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="30" rows="10" 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>
  • 相关阅读:
    零基础学习hadoop到上手工作线路指导(初级篇)
    手把手VirtualBox虚拟机下安装rhel6.4 linux 64位系统详细文档
    VMware虚拟机三种网络模式的区别
    python学习笔记(12)--爬虫下载煎蛋网图片
    python学习笔记(11)--爬虫下载漫画图片
    JS学习笔记(5)--一道返回整数数组的面试题(经验之谈)
    python学习笔记(10)--爬虫下载煎蛋图片
    python学习笔记(9)--Python UnicodeEncodeError: 'gbk' codec can't encode character 解决方法
    python学习笔记(8)--爬虫下载占位图片
    python学习笔记(7)--爬虫隐藏代理
  • 原文地址:https://www.cnblogs.com/jasonwang2y60/p/6060457.html
Copyright © 2011-2022 走看看