Angularjs做的一个小页面
<!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做的一个小页面的更多相关文章
- FMX相当于在界面上自己又做了一个小操作系统
FMX的自画界面我也不看好,比如复制粘贴,太丑了,系统做得很好很精细的复制粘贴界面,就是无法调出,比如MIUI,复制粘贴还能有个放大镜,可以选择到屏幕边缘的文字,可以选择剪贴板内多个可粘贴的文字:还有 ...
- 加班两个星期做的一个小系统~（winform）
不管怎么样~加班两个星期,单独一人,努力将公司需要用的系统给做出来了,也感谢提供技术帮助的可爱人儿~ 首先,系统有个检测版本的功能,若版本不是最新的,则会自动更新(公司要求,必须强制更新)~ 更新界面 ...
- DOM的利用冒泡做的一个小程序
我们都知道DOM的事件流,有冒泡事件,如何有效的利用冒泡? 优化:应该尽量少的添加事件监听:原理:每添加一个事件监听事件,就会在浏览器中添加一个EventListener,如果数量过多,浏览器只能一个 ...
- 基于Tkinter以及百度翻译爬虫做的一个小的翻译软件
首先看效果: 输入Hello, 可见输出 int. 打招呼 下面看源码: from tkinter import * import requests# 首先导入用到的库 request = reque ...
- 对于xss等有关的html，url，unicode编码做的一个小总结。
参考:http://bobao.360.cn/learning/detail/292.html,算是对前部分作一个总结性的学习. 1<a href="%6a%61%76%61%73%6 ...
- 自己做的一个小demo
上图: 主段代码: <script type="text/javascript"> var getRandomColor = function(){ return (f ...
- 用Unity做的一个小游戏，仿照一个样例写的，个人认为文章写的不错，哈哈
- 今天用C#做的一个小的注册练习
下边是实现的代码: using System;using System.Collections.Generic;using System.ComponentModel;using System.Dat ...
- jquery做一个小的轮播插件---有BUG，后续修改
//首页无缝轮播 ; (function($, window, document, undefined) { $.fn.slider = function(options) { var default ...
随机推荐
- 准备使用 Office 365 中国版--安装
温故而知新,先附上一个链接:Office 365常见问题 Office 365中Office套件的安装介质和传统Office套件的安装介质是有些区别的,虽然功能都一样.因此,如果购买了带Office套 ...
- css3中变形与动画（二）
css3制作动画的几个属性:变形(transform),过渡(transition)和动画(animation). transform介绍过了.接下来介绍过渡transition. 一.例子 先通过一 ...
- plain framework 1 版本更新 1.0.2 增加打包插件
由于个别因素,该框架的文档没有及时的更新到博客上,但是离线的文档已经完成.本次更新对框架来说显得比较重要,因为在文档的编写过程中经过再次的阅读代码修复了不少错误,最主要的是统一了整个框架的标准风格.对 ...
- 【2016-10-15】【坚持学习】【Day6】【组合模式】
哈哈,今天偷懒了,在晚上只看了一个组合模式. 例子: 树结构,有一些是树节点,一些是叶子节点. 比如,文件夹树结构,一个是文件夹节点,一个是文件节点,虽然都是树的节点,但是具体的业务肯定是区别的. 代 ...
- [每日菜单]lunch menu for Wednesday, February 24 2016
HIGHLIGHTS ** Boiled Broccoli原味西兰花 Steamed Turbot with Chili剁椒蒸多宝鱼 * Rye Bread黑麦面包 CHINESE CU ...
- ArrayList实现线程安全的blogs
ArrayList是线程不安全的,轻量级的.如何使ArrayList线程安全? 1.继承Arraylist,然后重写或按需求编写自己的方法,这些方法要写成synchronized,在这些synchro ...
- Android app 简单的电话拨号器
实现步骤: 1.画UI 可以用拖拽和文本编辑. 2.根据UI写业务逻辑 在MainActivity中的onCreate中编写 //get editText content et_number = ( ...
- 4种sql分页
四种方式实现SQLServer 分页查询 SQLServer 的数据分页: 假设现在有这样的一张表:CREATE TABLE test( id int primary key not null ide ...
- SQL Server日期与字符串之间的转换
本文导读:在SQL Server数据库中,SQL Server日期时间格式转换字符串可以改变SQL Server日期和时间的格式,是每个SQL数据库用户都应该掌握的.下面主要就介绍一下SQL Serv ...
- Centos 检查磁盘读写性能
启动Tomcat发现deploy war的速度明显变慢, 怀疑磁盘出问题 测试写入 [tomcat@localhost ~]$ dd if=/dev/zero of=kwxgd bs=64k coun ...