<!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. Crossing Rivers UVA - 12230 概率与期望

    题目大意:有个人每天要去公司上班,每次会经过N条河,家和公司的距离为D,默认在陆地的速度为1,给出N条河的信息,包括起始坐标p,宽度L,以及船的速度v.船会往返在河的两岸,人到达河岸时,船的位置是随机 ...

  2. 【转载】使用IntelliJ IDEA提示找不到struts-default文件

    创建strus,参考文如下: https://blog.csdn.net/u010358168/article/details/79769137 使用IntelliJ IDEA创建struts2工程时 ...

  3. java8方式日期比较

    static ZoneId ZONEID_BJ = ZoneId.of("GMT+08:00"); private boolean sameDate(Date d1, Date d ...

  4. nyoj51-管闲事的小明

    管闲事的小明 时间限制:4000 ms  |  内存限制:65535 KB 难度:2 描述 某校大门外长度为L的马路上有一排树,每两棵相邻的树之间的间隔都是1米.我们可以把马路看成一个数轴,马路的一端 ...

  5. nyoj169-素数

    ms  |  内存限制:65535 KB 难度:1 描述 走进世博园某信息通信馆,参观者将获得前所未有的尖端互动体验,一场充满创想和喜悦的信息通信互动体验秀将以全新形式呈现,从观众踏入展馆的第一步起, ...

  6. win安装配置Java8环境

    这里就不重复造轮子,搜索一下. 一堆就出来 这里就引用一个百度知道的经验 https://jingyan.baidu.com/article/48b558e3f135687f38c09a03.html ...

  7. PAT 1080. Graduate Admission

    It is said that in 2013, there were about 100 graduate schools ready to proceed over 40,000 applicat ...

  8. 【Codeforces Round #519 by Botan Investments A】 Elections

    [链接] 我是链接,点我呀:) [题意] [题解] 枚举k 那么另外一个人的得票就是nk-sum(ai) 找到最小的满足nk-sum(ai)>sum(ai)的k就ok了 [代码] #includ ...

  9. ASP.NET--MVC--伪静态

    原文地址 以前伪静态很流行主要是为了SEO优化排名,现在搜索引擎对静态网站和动态网站的权重差不多了,就没有必要再伪静态了,个人意见,仅供参考. 有些客户要求设置静态的,为了完成需求,而且更简单的做法就 ...

  10. 基于ffmpeg和libvlc的视频剪辑、播放器

    以前研究的时候,写过一个简单的基于VLC的视频播放器.后来因为各种项目,有时为了方便测试,等各种原因,陆续加了一些功能,现在集成了视频播放.视频加减速.视频剪切,视频合并(增加中)等功能在一起.有时候 ...