<!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. Selenium3+python自动化 单选框和复选框

    一.认识单选框和复选框 1.先认清楚单选框和复选框长什么样 2.各位小伙伴看清楚哦,上面的单选框是圆的:下图复选框是方的,这个是业界的标准,要是开发小伙伴把图标弄错了,可以先抽他了. 二.radio和 ...

  2. 怎么获取自定义核算项目里某一个类型的数据:做f7

    在BOS里加一个F7字段,关联物料或其他可以选到的基础资料.保存后先别发布    切换到BOS透视图,打到对应的.relation文件,修改supplierEntity,原来是指定物料的实体,改成自定 ...

  3. autoware安装

    1.Autoware的地址为https://github.com/CPFL/Autoware2.Install dependencies for Ubuntu 16.04 kinetic安装教程ins ...

  4. 自学python 第三天

    #!/usr/bin/env python# -*- coding:utf-8 -*- # name = "***"# if "*" in name:# pri ...

  5. Wireshark中的一些SNMP相关的过滤器

    Wireshark中的一些SNMP相关的过滤器 转自 http://linmingren2003.blog.163.com/blog/static/567510032011419825097/   由 ...

  6. 20160223.CCPP体系具体解释(0033天)

    程序片段(01):MyArray.h+MyArray.c+main.c 内容概要:数组库 ///MyArray.h #pragma once #define DT int//类型通用 typedef ...

  7. LDA 两种含义

    关于LDA有两种含义,一种是线性判别分析(Linear Discriminant Analysis),一种是概率主题模型:隐含狄利克雷分布(Latent Dirichlet Allocation,简称 ...

  8. HDU 3691

    一个源点,一个汇点,明显是网络流的问题,但据说用网络流来求最小割,会超时..囧,那出题的人是怎么想的... 用SW的算法来求最小割. #include <iostream> #includ ...

  9. 恩布企业IM PC端，服务端公布 1.16 版本号

    恩布企业IM PC端,服务端公布1.16版本号,开源企业IM.免费企业即时通讯软件:主要版本号更新内容: 恩布服务端核心程序,添加进程守护保护机制,确保系统7*24持续稳定服务: 服务端添加内存数据库 ...

  10. IOS - 查找未使用的图片

    实现细节都在代码里面, 帮助 -h. # -*- coding: utf-8 -*- """ 检查IOS应用图片是否使用 1. 读取有效文件: 图片(.png, .jpg ...