<!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实现动态的留言板案例的更多相关文章

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

    ## 1. 先打开编辑器,创建一个项目 ## 2. 再打开cmd命令提示符下载express脚手架 express   项目名   --view=ejs 或express   -e    项目名 ## ...

  2. JS 留言板案例

    css代码 ul { list-style: none; } ul li { background-color: pink; line-height: 40px; margin: 10px; widt ...

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

    1.模态框案例 需求: 打开网页时有一个普通的按钮,点击当前按钮显示一个背景图,中心并弹出一个弹出框,点击X的时候会关闭当前的模态框 代码如下: <!DOCTYPE html> <h ...

  4. angular留言板

    今天使用angularJs写了一个留言板,简单的享受了下angular处理数据的双向绑定的方便:注释已经都写到行间了 <!DOCTYPE html> <html lang=" ...

  5. Django入门3 简单留言板项目案例及mysql驱动的安装配置

    新建jangostart项目 使用manager.py新建app即单独的应用 创建一个message应用 manage.py@djangostart > startapp message 如果a ...

  6. php防注入留言板（simple）

    新手学php,试手案例便是留言板.以前未连接数据库时,我是直接将用户输入的留言写入到一个txt,然后再从txt读取显示(~.~别鄙视). 最近学习了php访问MySQL数据库的一些知识,重写了一下留言 ...

  7. Servlet实践--留言板-v1

    功能介绍: 由三个jsp页面组成,在doGet中根据请求URL中的请求参数不同,跳转到不同的页面: 页面1:显示整个留言板列表 页面2:创建留言页面(包括用户.主题.内容和上传文件) 页面3:在查看单 ...

  8. Vue之简易的留言板功能

    今天我将带大家通过Vue的todolist案例来完成一个简易的网页留言板! LES'T GO! 首先我们需要在页面上搭建一个input文本输入框,并设置提交按钮,通过循环指令来完成输入框的信息提交! ...

  9. jquery-11 留言板如何实现

    jquery-11 留言板如何实现 一.总结 一句话总结:用live()方法让后面动态添加的元素也绑定之前对应类绑定的方法. 1.如何让后面动态添加的元素也绑定之前对应类绑定的方法? 用live()方 ...

随机推荐

  1. java源码

    Java泛型中的标记符含义: K - Key(键) V - Value(值) E - Element (在集合中使用,因为集合中存放的是元素) T - Type(Java 类,可做泛型) N - Nu ...

  2. AndroidStudio 内存泄漏的分析过程

    前言部分这次泄漏是自己代码写的太随意引起的,讲道理,代码写的太为所欲为了,导致有些问题根本就很难发现. 泄漏产生的原因,由于activity未被回收导致.这里给我们提出的一个警示,在使用上下文的时候, ...

  3. Vue CLI 3 中文文档

    翻译文档 文档翻译全貌 前言 之前写了一篇Vue CLI 3.x 版本的简单体验,当时文档还不全,具体的使用方法并不是很清楚,大概是2月7号,收到Vue CLI 3接近Beta版的提示,作者尤雨溪也讲 ...

  4. ubuntu 配置lamp

    官方配置网站:http://wiki.ubuntu.org.cn/LAMP_%E6%9C%8D%E5%8A%A1%E5%99%A8%E5%AE%89%E8%A3%85%E9%85%8D%E7%BD%A ...

  5. PAT 1079. Total Sales of Supply Chain

    A supply chain is a network of retailers(零售商), distributors(经销商), and suppliers(供应商)-- everyone invo ...

  6. 学习EXTJS6（7）基本功能-最常用的表单

    开发过程中关于表单的处理无非: 1.表单和表单元素 2.实现表单验证 3.表单的提交和加载 -------------------------------------- 1.Ext.form.Basi ...

  7. netty心跳机制和断线重连(四)

    心跳是为了保证客户端和服务端的通信可用.因为各种原因客户端和服务端不能及时响应和接收信息.比如网络断开,停电 或者是客户端/服务端 高负载. 所以每隔一段时间 客户端发送心跳包到客户端  服务端做出心 ...

  8. asp.net--ado.net5大对象代码示例

    连接数据库 string conn_string ="Data Source=localhost;Initial Catalog=SQLtest;Integrated Security=Tr ...

  9. caffe中ConvolutionLayer的前向和反向传播解析及源码阅读

    一.前向传播 在caffe中,卷积层做卷积的过程被转化成了由卷积核的参数组成的权重矩阵weights(简记为W)和feature map中的元素组成的输入矩阵(简记为Cin)的矩阵乘积W * Cin. ...

  10. POJ 1021 人品题

    报告见代码.. #include <iostream> #include <cstdio> #include <cstring> #include <algo ...