首页 > 代码库 > angular留言板

angular留言板

2024-08-20 17:55:29   221人阅读

今天使用angularJs写了一个留言板，简单的享受了下angular处理数据的双向绑定的方便；注释已经都写到行间了

<!DOCTYPE html>
<html lang="en" ng-app="text">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href=http://www.mamicode.com/"base.css">
    <style>
        .main{
            width: 600px;
            height: 250px;
            background:#ccc;
            margin:0 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(146,234,250,0.8);
            text-align:center;
            font:20px/40px ‘微软雅黑‘;
            margin:0 auto;
        }
        .message{
            width: 600px;
            height: 100px;
            background:rgba(146,234,250,0.8);
            margin:0 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=http://www.mamicode.com/"angular.js"></script>
    <script>
            var app=angular.module(‘text‘,[]);
            app.controller(‘add_msg‘,function($scope){
                //先清空留言填写处的信息
                $scope.data=http://www.mamicode.com/[];
                $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=http://www.mamicode.com/"确定" 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留言板


联系
我们