<!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. web开发——在网页中引用字体包(.ttf)，即嵌入特殊字体

    在写html时,有点时候需要显示一些特殊字体,不过这些特殊字体是系统一般不自带的,这时就需要我们自行加载要用的字体.方法如下: 1.首先在style里添加: @font-face { font-fam ...

  2. 另一个维度：cocos-2d VS vue

    最近再看cocos-2d的东西,期间得到了同事和老板的支持,在此感谢.之前一直在做vue网页,现在看游戏cocos-2d这块,刚接触肯定有点不适应.cocos-2d多了很多感念:导演.场景.节点等.这 ...

  3. git_安装与配置

    安装 windows平台安装 在windows平台安装git,需要下载exe.文件,下载地址:https://gitforwindows.org/,双击下载的.exe文件,按照提示进行安装,安装完成后 ...

  4. javaee 用Buffered进行对象的写入和读取

    package Zjshuchu; import java.io.Serializable; public class Dog implements Serializable{    private ...

  5. day36 类的三大特性---封装以及Property特性

    目录 类的封装 如果真的要拿 类的property特性 setter & deleter 类属性用法 类与对象的绑定方法和非绑定方法 对象方法&类方法&静态方法 隐藏模块内的函 ...

  6. Django的Error汇总

    title: Django学习笔记 catalog: true subtitle: 11. Django_Error汇总 date: 2018-12-14 10:17:28 --- Django的Er ...

  7. ORACLE 查询不走索引的原因分析，解决办法通过强制索引或动态执行SQL语句提高查询速度

    (一)索引失效的原因分析: <>或者单独的>,<,(有时会用到,有时不会) 有时间范围查询:oracle 时间条件值范围越大就不走索引 like "%_" ...

  8. PAT_A1123#Is It a Complete AVL Tree

    Source: PAT A1123 Is It a Complete AVL Tree (30 分) Description: An AVL tree is a self-balancing bina ...

  9. scrapy-redis使redis不止保存url

    先看scrapy-redis源码 class RedisMixin(object): """Mixin class to implement reading urls f ...

  10. CSS max-width: 0;

    写CSS,大家都知道max-width是要在宽度超过后才会生效,但今天我发现一个神奇的现象, 为表格td加上max-width: 0;可以让上下两个表格自动对齐,这句的作用到底是什么还有待研究,今天先 ...