day22—一个AngularJS框架应用toDoList
转行学开发，代码100天——2018-04-07
今天用AngularJS照着课程写了一个案例，即toDoList，记事清单效果。
主要实现以下效果：
1.通过文本框添加内容，同时添加事件列表。主要用到ng-model="task"对input输入框进行数据绑定，通过ng-click="add()"事件为按钮添加响应——将输入内容显示到文本框下列表栏中。
2.细节处理1：“任务列表”文字的显隐，即在事件数目>0时才显示，ng-if="tasks.length>0"或者ng-hide="tasks.length==0". 但二者更倾向于前者，区别在于后者是创建了“任务列表”元素，只是设置了隐藏。
3.细节处理2：当输入相同列表事件内容时，并不会实现事件新增。因此需要在<li>标签里新增ng-repeat=“item in tasks track by $index”，其中，item是事件项变量，tasks是事件数组，by $index 即按照序号。
<!DOCTYPE html>
<html ng-app="todoList">
<head>
<meta charset="utf-8">
<title>todoList</title>
<script src="js/angular.min.js"></script>
</head>
<body ng-controller="TrackCtrl">
<div >
<input ng-model="task" type="text" ></input>
<span class="input-group-btn">
<button ng-click="add()">提交</button>
</span>
</div>
<h4 ng-if="tasks.length>0">任务列表</h4>
<li ng-repeat="item in tasks track by $index " >{{item}}<a href="#" ng-click="tasks.splice($index,1)">删除</a></li>
</body>
<script type="text/javascript">
angular.module('todoList',[]).controller('TrackCtrl',function($scope) {
$scope.task ="";
$scope.tasks =[];
$scope.add = function()
{
$scope.tasks.push($scope.task);
}
})
</script>
</html>
实现效果如下：
此外，通过“删除”事件，可以将本行事项删除。
day22—一个AngularJS框架应用toDoList的更多相关文章
- AngularJS - 下一个大框架
AngularJS AngularJS是web应用的下一个巨头. AngularJS如果为创建web应用而设计,那它就是HTML的套路了.具有数据绑定, MVW, MVVM, MVC, 依赖注入的声明 ...
- 十佳AngularJS框架
您是否还在烦恼如何没有困难地创建一个创新型的Web应用程序?那么一定不要错过这个集合!在本文中,小编为大家收集了十个非常棒的AngularJS框架.AngularJS框架拥有大量有用的工具和组件,可以 ...
- 10 个非常有用的 AngularJS 框架
AngularJS是最流行的开源web app框架.AngularJS被用于解决阻碍单页应用程序开发的各种挑战. 你作为一个AngularJS用户,却不知道一些可以帮助你美化编码的资源?那么一定不能错 ...
- 你的第一个AngularJS应用--教程二：基架、建立和測试的工具
介绍 有非常多可用的工具能够帮助你开发AngularJS 应用,那些非常复杂的框架不在我的讨论范围之中,这也是我開始这系列教程的原因. 在第一部分,我们掌握了AngularJS框架的基本结构,开发了第 ...
- AngularJS框架研究（一）
和几年前相比,现在的Javascript开发方式有了翻天覆地的变化,一些极具创意的开发工具的出现,让前端开发更加成熟,Angular框架就是一个例子.最近在看Angular的源代码,发现并不是件容易的 ...
- AngularJS框架速写
最近在把玩AngularJS框架,之前也看过流行的Backbone,不过AngularJS给人的感觉完全不同,它走的是一条高帅富之路. 按照官方的说法,AngularJS是一套依赖注入的MVC开发套件 ...
- 简洁AngularJS框架后台管理系统bootstrap后台模板
最近在做一个后台管理的项目,但是没有设计图完全,所以就发现一款非常不错的模版. 这个模版是基于 AngularJS 和 bootstrap 的后台管理系统模版. Minovate是 AngularJS ...
- TodoMVC：帮助你选择一个MV*框架
开发者现在有很多的MV*框架选择来组织开发web应用程序.Backbone. Ember.AngularJS.Spine… 新的稳定解决方案列表持续增长,但你如何决定在海量的框架中选择哪个使用? 为了 ...
- 如何实现一个php框架系列文章【开篇】
1.本系列文章的目的 实现一个小而美的产品级别php框架 自己动手实现一个新框架仅用于学习交流,不打算替代市面上现有的其他主流框架. 2. 我要一个怎样的PHP框架 简单实用,安全优雅,博采众长 安装 ...
随机推荐
- sublime text3插件安装及使用
sublime官网下载地址:http://www.sublimetext.com/ 我用的是SubLime text3,插件安装命令地址:https://packagecontrol.io/insta ...
- [2019杭电多校第三场][hdu6609]Find the answer(线段树)
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=6609 大致题意是求出每个位置i最小需要将几个位置j变为0(j<i),使得$\sum_{j=1}^ ...
- osi七层协议 Open System Interconnection
一, 操作系统基础 操作系统:(Operating System,简称OS)是管理和控制计算机硬件与软件资源的计算机程序,是直接运行在"裸机"上的最基本的系统软件,任何其他软件都必 ...
- 微信JS-SDK选择图片遇到的坑
微信JS-SDK选择图片遇到的坑 有个需求要在微信企业号里面做开发,有个功能是选择图片,使用input标签肯定是不管用了,Android手机上不能多选,所以使用了微信的JS-SDK提供的相关API,这 ...
- Python所有转义字符总汇
转义字符就是让程序按照已经设置好的字符输出,不然程序当成其他的输出了,下面总结所有python转义字符 \\ 反斜杠符号\' 单引号\" 双引号\a 响铃\b 退格(Backspace)\e ...
- 树莓派VNC Viewer 远程桌面配置教程
作为一个刚入门的小白,你还在为如何配置树莓派的远程桌面控制苦恼? 是否希望能够每次在树莓派上无须接上显示器.键盘.鼠标以及走到放置你的树莓派的地方就可以运行指令! 在这篇树莓派文章中,你将学到如何在树 ...
- java 进销存管理 商户管理 库存管理 springmvc SSM 项目源码
统介绍: 1.系统采用主流的 SSM 框架 jsp JSTL bootstrap html5 (PC浏览器使用) 2.springmvc +spring4.3.7+ mybaits3.3 SSM 普 ...
- 通过express来打造api服务器
通过express来打造api服务器[ 后端接口 ] 1.步骤 1.通过脚手架创建项目 const express = require('express'); const router = expre ...
- express通过生成器
express通过生成器 [ 脚手架 ] 1. 作用:可以帮助快速构建一个express项目 2. 脚手架的安装 全局安装 [可以使用npm cnpm] $ cnpm i express-genera ...
- Puppeteer实现自动登录
Puppeteer是用JS对Chrome Dev Tools的实现,可以用来操作Chrome浏览器,适用于爬虫.自动化等领域. 以下是自己实现自动化登录的代码(基于ES6) const puppete ...