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>
angular实现动态的留言板案例的更多相关文章
- nodejs中利用expresss脚手架和bootstrap,数据库mongodb搭建的留言板案例
## 1. 先打开编辑器,创建一个项目 ## 2. 再打开cmd命令提示符下载express脚手架 express 项目名 --view=ejs 或express -e 项目名 ## ...
- JS 留言板案例
css代码 ul { list-style: none; } ul li { background-color: pink; line-height: 40px; margin: 10px; widt ...
- DOM操作相关案例 模态对话框,简易留言板,js模拟选择器hover,tab选项卡,购物车案例
1.模态框案例 需求: 打开网页时有一个普通的按钮,点击当前按钮显示一个背景图,中心并弹出一个弹出框,点击X的时候会关闭当前的模态框 代码如下: <!DOCTYPE html> <h ...
- angular留言板
今天使用angularJs写了一个留言板,简单的享受了下angular处理数据的双向绑定的方便:注释已经都写到行间了 <!DOCTYPE html> <html lang=" ...
- Django入门3 简单留言板项目案例及mysql驱动的安装配置
新建jangostart项目 使用manager.py新建app即单独的应用 创建一个message应用 manage.py@djangostart > startapp message 如果a ...
- php防注入留言板(simple)
新手学php,试手案例便是留言板.以前未连接数据库时,我是直接将用户输入的留言写入到一个txt,然后再从txt读取显示(~.~别鄙视). 最近学习了php访问MySQL数据库的一些知识,重写了一下留言 ...
- Servlet实践--留言板-v1
功能介绍: 由三个jsp页面组成,在doGet中根据请求URL中的请求参数不同,跳转到不同的页面: 页面1:显示整个留言板列表 页面2:创建留言页面(包括用户.主题.内容和上传文件) 页面3:在查看单 ...
- Vue之简易的留言板功能
今天我将带大家通过Vue的todolist案例来完成一个简易的网页留言板! LES'T GO! 首先我们需要在页面上搭建一个input文本输入框,并设置提交按钮,通过循环指令来完成输入框的信息提交! ...
- jquery-11 留言板如何实现
jquery-11 留言板如何实现 一.总结 一句话总结:用live()方法让后面动态添加的元素也绑定之前对应类绑定的方法. 1.如何让后面动态添加的元素也绑定之前对应类绑定的方法? 用live()方 ...
随机推荐
- 11.5 【Linq 】连接
11.5.1 使用 join 子句的内连接 如果你打算把一个巨大的序列连接到一个极小的序列上,应尽可能把小序列作为右边序列 class Program { static void Main(strin ...
- html第九节课
正则表达式和marquee 1.表单验证<form></form> (1).非空验证(去空格) (2).对比验证(跟一个值对比) (3).范围验证(根据一个范围进行判断) (4 ...
- 洛谷P1115 最大子段和【dp】
题目描述 给出一段序列,选出其中连续且非空的一段使得这段和最大. 输入输出格式 输入格式: 第一行是一个正整数NN,表示了序列的长度. 第二行包含NN个绝对值不大于1000010000的整数A_iAi ...
- Python学习笔记之异常处理
1.概念 Python 使用异常对象来表示异常状态,并在遇到错误时引发异常.异常对象未被捕获时,程序将终止并显示一条错误信息 >>> 1/0 # Traceback (most re ...
- 2.IntelliJ IDEA 下载破解(2017)
1.首先,我找到了 IntelliJ IDEA的官网:www.jetbrains.com 然后找到下载的地方,选择自己电脑所匹配的下载安装包,这里我们选择收费版的下载,因为免费版的功能并没有收费版的强 ...
- Bootstrap关于表单控件(按扭)
按钮也是表单重要控件之一,制作按钮通常使用下面代码来实现: ☑ input[type=“submit”] ☑ input[type=“button”] ☑ input[type=“r ...
- BZOJ 3218 UOJ #77 A+B Problem (主席树、最小割)
大名鼎鼎的A+B Problem, 主席树优化最小割-- 调题死活调不对,一怒之下改了一种写法交上去A了,但是改写法之后第4,5个点常数变大很多,于是喜提UOJ全站倒数第三 目前还不知道原来的写法为什 ...
- luogu P4238 多项式求逆 (模板题、FFT)
手动博客搬家: 本文发表于20181125 13:21:46, 原地址https://blog.csdn.net/suncongbo/article/details/84485718 题目链接: ht ...
- 【codeforces 793B】Igor and his way to work
[题目链接]:http://codeforces.com/contest/793/problem/B [题意] 给一个n*m大小的方格; 有一些方格可以走,一些不能走; 然后问你从起点到终点,能不能在 ...
- (20)Spring Boot Servlet【从零开始学Spring Boot】
Web开发使用 Controller 基本上可以完成大部分需求,但是我们还可能会用到 Servlet.Filter.Listener.Interceptor 等等. 当使用Spring-Boot时,嵌 ...