<!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. phtoshop CC2018破解简单过程

    1.下载adobe photoshop cc 2018(可以用360安全卫士下载)-->并安装2.下载破解补丁,破解补丁下载地址:http://www.xue51.com/soft/1377.h ...

  2. Spring实战（中文4,5版） PDF含源码

    Spring实战 读者评价 看了一半后在做评论,物流速度挺快,正版行货,只是运输过程有点印记,但是想必大家和你关注内容,spring 4必之3更加关注的是使用注解做开发,对于初学者还是很有用,但是不排 ...

  3. 洛谷P1443 马的遍历【BFS】

    题目描述 有一个n*m的棋盘(1<n,m<=400),在某个点上有一个马,要求你计算出马到达棋盘上任意一个点最少要走几步 输入输出格式 输入格式: 一行四个数据,棋盘的大小和马的坐标 输出 ...

  4. 7.ES几种常见的搜索方式

    主要知识点  1, query string search (1)  GET /ecommerce/product/_search (2) GET/ecommerce/product/_search? ...

  5. html_entity_decode()、空格、&nbsp; 乱码问题

    普通 ASCII 码空格为 32,但是浏览器会对普通空格进行自动归并,也就是如果你输入10个 0x20 的空格在HTML页面里面,可能会被合并成一个空格. 如果想要一致的呈现多个空格,就要用到 编码标 ...

  6. 那么再会吧！OI！(HNOI2019退役记)

    现在是4月7号7点. 退役了. 至此,整个LSOI17届全部毕业. 想说些什么呢?不知道啊. day1紧张过头,真正开始了解题意是在11点以后.半路忘了kmp怎么打,第一题计算几何根本没管,好啊,第三 ...

  7. BZOJ 2956 模积和 (数学推导+数论分块)

    手动博客搬家: 本文发表于20170223 16:47:26, 原地址https://blog.csdn.net/suncongbo/article/details/79354835 题目链接: ht ...

  8. SpringBoot后台如何实现文件上传下载

    1.单文件上传: @RequestMapping(value = "/upload") @ResponseBody public String upload(@RequestPar ...

  9. 【codeforces 797D】Broken BST

    [题目链接]:http://codeforces.com/contest/797/problem/D [题意] 给你一个二叉树; 然后问你,对于二叉树中每个节点的权值; 如果尝试用BST的方法去找; ...

  10. Merging into a Table: Example

    Merging into a Table: Example The following example uses the bonuses table in the sample schema oe w ...