<!DOCTYPE html>
<html lang="en" ng-app="todolist">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/>
<script src="js/jquery-1.9.1.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
<title>web应用</title>
</head>
<body ng-controller='taskctrl' style="padding: 10px;">
<div class="input-group" >
<input type="text" name="" id="" value="" class="form-control" ng-model="task"/>
<span id="" class="input-group-btn">
<button class="btn btn-default" ng-click="add()">提交</button>
</span>
</div>
<h4 ng-if="tasks.length>0">任务列表</h4>  //ng-if="tasks.length是指数组长度为0的时候不显示任务列表字样 ,也可以使用 ng-                       hide="tasks.length==0",ng-if是满足条件才生成,ng-hide是生成之后条件满足后隐藏,建议使用ng-if
<ul class="list-group">
<li ng-repeat="item in tasks track by $index" class="list-group-item">{{item}}<a ng-click="tasks.splice($index,1)" class="pull-right">删除</a></li> //track by $index是可以在任务列表中展示同样内容的li,tasks.splice($index,1)是可以删除一整行li

</ul>
</body>
<script src="js/angular.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
angular.module('todolist',[])
.controller('taskctrl',function($scope){
$scope.task="";
$scope.tasks=[];
$scope.add=function(){
$scope.tasks.push($scope.task);
}
});
</script>
</html>

Angularjs做的一个小页面的更多相关文章

  1. FMX相当于在界面上自己又做了一个小操作系统

    FMX的自画界面我也不看好,比如复制粘贴,太丑了,系统做得很好很精细的复制粘贴界面,就是无法调出,比如MIUI,复制粘贴还能有个放大镜,可以选择到屏幕边缘的文字,可以选择剪贴板内多个可粘贴的文字:还有 ...

  2. 加班两个星期做的一个小系统~(winform)

    不管怎么样~加班两个星期,单独一人,努力将公司需要用的系统给做出来了,也感谢提供技术帮助的可爱人儿~ 首先,系统有个检测版本的功能,若版本不是最新的,则会自动更新(公司要求,必须强制更新)~ 更新界面 ...

  3. DOM的利用冒泡做的一个小程序

    我们都知道DOM的事件流,有冒泡事件,如何有效的利用冒泡? 优化:应该尽量少的添加事件监听:原理:每添加一个事件监听事件,就会在浏览器中添加一个EventListener,如果数量过多,浏览器只能一个 ...

  4. 基于Tkinter以及百度翻译爬虫做的一个小的翻译软件

    首先看效果: 输入Hello, 可见输出 int. 打招呼 下面看源码: from tkinter import * import requests# 首先导入用到的库 request = reque ...

  5. 对于xss等有关的html,url,unicode编码做的一个小总结。

    参考:http://bobao.360.cn/learning/detail/292.html,算是对前部分作一个总结性的学习. 1<a href="%6a%61%76%61%73%6 ...

  6. 自己做的一个小demo

    上图: 主段代码: <script type="text/javascript"> var getRandomColor = function(){ return (f ...

  7. 用Unity做的一个小游戏,仿照一个样例写的,个人认为文章写的不错,哈哈

  8. 今天用C#做的一个小的注册练习

    下边是实现的代码: using System;using System.Collections.Generic;using System.ComponentModel;using System.Dat ...

  9. jquery做一个小的轮播插件---有BUG,后续修改

    //首页无缝轮播 ; (function($, window, document, undefined) { $.fn.slider = function(options) { var default ...

随机推荐

  1. 开发Eclipse自定义控件

    摘自:http://www.ibm.com/developerworks/cn/opensource/os-eclipcntl/ 我们在开发自定义控件时主要考虑以下问题: 1. 自定义控件的绘制:通常 ...

  2. Linux安装Mysql rpm

    1.安装时候会提示与已经安装的RPM包有冲突,所以我们先卸载一些RPM包,要卸载哪些呢?我们要卸载的是包含有mariadb关键字的RPM包,执行命令:rpm -qa|grep mariadb来查看一下 ...

  3. (六)责任链模式-C++实现

    使多个对象都有机会处理请求,从而避免请求的发送者和接收者之间的耦合关系.将这些对象连成一条链,并沿着这条链传递请求,直到有一个对象处理它为止. 责任链模式是使用多个对象处理用户请求的成熟模式,它的关键 ...

  4. .NET(C#) File类的常用方法

    MSDN的File类 File类在MSDN:https://msdn.microsoft.com/zh-cn/library/system.io.file_methods(v=vs.110).aspx ...

  5. 更改项目名或者多个项目时,发现多个"Home"匹配的Controller时,解决方法

    [备份]异常信息:找到多个与名为“Home”的控制器匹配的类型.如果为此请求(“{controller}/{action}/{id}”)提供服务的 路由在搜索匹配此请求的控制器时没有指定命名空间,则会 ...

  6. [No000030]程序员节发点别的:中国教育整个把人脑子搞坏了-易中天

    导读 在易中天看来,中国教育和中国文化的问题一样,是弱智化.搞坏的原因是什么?是我们的教育评价目标就是"成王败寇"四个字.他明确提出反对励志,反对培优,反对成功学,反对望子成龙.他 ...

  7. python-day02数据类型-字符串和列表的操作

    while循环: while True: 条件语句....... 关于break和continue,break:跳出当前的循环                               contnu ...

  8. 利用substring()方法,把一个表的不同分级所对应的字段名取出来。

    实例:现在有一个物料分类的表.知道表的第四级的值,要取前面的2,3级值. 例如,如图所示: 可以通过取前面几个字段的值,得到对应级别的值.利用substring(),但是因为要写在一句话里. 因此可以 ...

  9. git删除分支|查看分支动态

    git不能在当前分支下删除你当前所在的分支,比如你要删除new分支,而现在正在处于new分支下,则执行git branch -d new的时候会报错 error: Cannot delete bran ...

  10. 创建Visual studio项目模板 vstemplate关键点纪要

    from:http://www.cnblogs.com/stickman/p/3454719.html 经过多次的实验,终于完美生成一个.VSIX的项目模板安装包,其中遇到不少问题与挫折,久经goog ...