angular实现动态的留言板案例

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        ul>li{
            list-style: none;
            display: inline-block;
        }
    </style>
    <script src="angular/angular.js"></script>
</head>
<body>
<div ng-app="myTodoApp" ng-controller="myTodoCtrl">

    <h2>留言板:</h2>

    <p><textarea ng-model="message" cols="40" rows="10"></textarea></p>

    <p>
        <button ng-click="submit()">提交</button>
        <button ng-click="reset()">重置</button>
    </p>

    <p>剩下的字符数:<span ng-bind="left()"></span></p>
    <ul ng-repeat="news in newsArry">
        <li>{{news.values}}</li>        <span>{{news.time}}</span><button ng-click="delete(news)">删除留言</button>
    </ul>

</div>

<script>
    var app=angular.module("myTodoApp",[]);
       app.controller("myTodoCtrl",function($scope){
           $scope.newsArry=[{
             values:"我要订一间房",
               time:"2016-10-01"
           }];
           $scope.message="";
           $scope.left=function(){
           return 150-$scope.message.length;
           };
           $scope.reset=function(){
             $scope.message="";
           };
           $scope.submit=function(){
               var news={};
               var times=new Date();
               news.values=$scope.message;
               news.time=times.toLocaleString();
             $scope.newsArry.push(news);
               $scope.message="";
           };
           $scope.delete=function(news){
               var index=$scope.newsArry.indexOf(news);
                $scope.newsArry.splice(index,1);
           };
       });
</script>

</body>
</html>
时间: 2024-10-15 04:23:35

angular实现动态的留言板案例的相关文章

留言板案例

登录界面: <body> <h1>登录界面</h1> <form action="chuli.php" method="post"> <div > 开发部内部留言板 </div> <div >用户名:<input type="txt" name="yh" /></div> <div >口令:<input

nodejs中利用expresss脚手架和bootstrap,数据库mongodb搭建的留言板案例

## 1. 先打开编辑器,创建一个项目 ## 2. 再打开cmd命令提示符下载express脚手架 express   项目名   --view=ejs 或express   -e    项目名 ## 3. 在cmd中进入项目名(myapp)下载所需的依赖 cd myapp  --------->cnpm  install ## 4. 在下载mongoose(前提你电脑上要安装数据库的插件) cn cnpm mongoose  --save ## 5. 在myapp项目中在创建一个文件夹,里面在

DOM操作相关案例 模态对话框,简易留言板,js模拟选择器hover,tab选项卡,购物车案例

1.模态框案例 需求: 打开网页时有一个普通的按钮,点击当前按钮显示一个背景图,中心并弹出一个弹出框,点击X的时候会关闭当前的模态框 代码如下: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{ padding: 0; margin: 0; }

angular留言板

今天使用angularJs写了一个留言板,简单的享受了下angular处理数据的双向绑定的方便:注释已经都写到行间了 <!DOCTYPE html> <html lang="en" ng-app="text"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet&qu

Jsp+Servlet+JavaBean学习阶段案例-留言板(MessageBoard)

Jsp+Servlet+JavaBean学习阶段的一个案例总结 名称:留言板(MessageBoard) 开发技术:Jsp+Servlet+JavaBean 数据库:Mysql 开发工具:IntelliJ IDEA 2016.1.3 服务器:Tomcat 8.0.36 功能说明 普通用户:增加删除修改留言信息 管理员:增加删除修改留言信息.管理用户.设置用户发帖留言权限 数据库结构 tb_user表 字段 类型 名称 说明 id int id name nvarchar 姓名 password

案例:简单留言板

主页代码: <style type="text/css"> *{ margin:0px; padding:0px; } #a{ margin:10px auto; width:300px; height:100px; } #b{ border:#000 1px solid; width:300px; height:100px; margin:10px auto; } #aa{ width:300px; height:100px; } </style> </

js实现动态添加删除(留言板)

介绍:仿照留言板写一个类似的实例,具有添加.删除的简单功能 思路:点击发布按钮,利用DOM操作进行元素添加[appendChild()],点击删除按钮,利用DOM找到父节点,进行删除[removeChild()] <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style typ

k8s官方案例练习-使用 Redis 部署 PHP 留言板应用程序

[[email protected] guestbook]# cat redis-master-deployment.yaml apiVersion: apps/v1 # for versions before 1.9.0 use apps/v1beta2 kind: Deployment metadata: name: redis-master labels: app: redis spec: selector: matchLabels: app: redis role: master tie

Servlet实践--留言板-v1

功能介绍: 由三个jsp页面组成,在doGet中根据请求URL中的请求参数不同,跳转到不同的页面: 页面1:显示整个留言板列表 页面2:创建留言页面(包括用户.主题.内容和上传文件) 页面3:在查看单个留言的详细内容(包括提供下载附件) 在doPost中处理创建留言的逻辑 如何实现这些功能: 1.使用什么来保存用户创建的留言(数据存储): 使用一个Ticket类对象来保存用户创建的留言,包括用户名.评论主题.评论内容和附件.附件是用一个Attachment类的实例来表示,该类中包含附件名和附件内