转行学开发，代码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的更多相关文章

  1. AngularJS - 下一个大框架

    AngularJS AngularJS是web应用的下一个巨头. AngularJS如果为创建web应用而设计,那它就是HTML的套路了.具有数据绑定, MVW, MVVM, MVC, 依赖注入的声明 ...

  2. 十佳AngularJS框架

    您是否还在烦恼如何没有困难地创建一个创新型的Web应用程序?那么一定不要错过这个集合!在本文中,小编为大家收集了十个非常棒的AngularJS框架.AngularJS框架拥有大量有用的工具和组件,可以 ...

  3. 10 个非常有用的 AngularJS 框架

    AngularJS是最流行的开源web app框架.AngularJS被用于解决阻碍单页应用程序开发的各种挑战. 你作为一个AngularJS用户,却不知道一些可以帮助你美化编码的资源?那么一定不能错 ...

  4. 你的第一个AngularJS应用--教程二：基架、建立和測试的工具

    介绍 有非常多可用的工具能够帮助你开发AngularJS 应用,那些非常复杂的框架不在我的讨论范围之中,这也是我開始这系列教程的原因. 在第一部分,我们掌握了AngularJS框架的基本结构,开发了第 ...

  5. AngularJS框架研究（一）

    和几年前相比,现在的Javascript开发方式有了翻天覆地的变化,一些极具创意的开发工具的出现,让前端开发更加成熟,Angular框架就是一个例子.最近在看Angular的源代码,发现并不是件容易的 ...

  6. AngularJS框架速写

    最近在把玩AngularJS框架,之前也看过流行的Backbone,不过AngularJS给人的感觉完全不同,它走的是一条高帅富之路. 按照官方的说法,AngularJS是一套依赖注入的MVC开发套件 ...

  7. 简洁AngularJS框架后台管理系统bootstrap后台模板

    最近在做一个后台管理的项目,但是没有设计图完全,所以就发现一款非常不错的模版. 这个模版是基于 AngularJS 和 bootstrap 的后台管理系统模版. Minovate是 AngularJS ...

  8. TodoMVC：帮助你选择一个MV*框架

    开发者现在有很多的MV*框架选择来组织开发web应用程序.Backbone. Ember.AngularJS.Spine… 新的稳定解决方案列表持续增长,但你如何决定在海量的框架中选择哪个使用? 为了 ...

  9. 如何实现一个php框架系列文章【开篇】

    1.本系列文章的目的 实现一个小而美的产品级别php框架 自己动手实现一个新框架仅用于学习交流,不打算替代市面上现有的其他主流框架. 2. 我要一个怎样的PHP框架 简单实用,安全优雅,博采众长 安装 ...

随机推荐

  1. 16 (H5*) JS第6天 日期、字符串、数组

    目录 1:date 2:格式化日期 3:字符串 4:字符串的方法 5:字符串的案例 6:数组的方法 7:包装类型 复习 正文 1:日期:date <script> //创建实例对象 // ...

  2. .NET MVC Json()处理大数据异常解决方法

    [1-部分原文]: .NET MVC Json()处理大数据异常解决方法 整个项目采用微软的ASP.NET MVC3进行开发,前端显示采用EasyUI框架,图表的显示用的是Highcharts,主要进 ...

  3. [Python3] 010 字符串：给你们看看我的内置方法 第二弹

    目录 少废话,上例子 1. isidentifier() 2. islower() 3. isnumeric() 4. isprintable() 5. isspace() 6. istitle() ...

  4. 《jmeter：菜鸟入门到进阶系列》

    jmeter是我从事软件测试工作以来接触的第一个性能测试工具,也是耗费时间精力最多的一个工具,当然,学习jmeter过程中,由于知识储备不够,也顺带学习了很多其他相关的一些知识. 一直有个想法,就是把 ...

  5. Java中数据类型的分类

    我们知道Java是强类型语言,那么肯定对应的也就有弱类型语言,以下介绍强类型语言与弱类型语言的区别: 强类型语言: 强类型语言也就是强制数据类型定义的语言.也就是说,一旦一个变量被指定了某个数据类型, ...

  6. express快速入门

    1.简介: express是基于Node.js平台,快速开放极简的web开发框架,使用 各种http使用工具和中间件,创建强大API. 2.安装 npm install express -g 全局安装 ...

  7. struts2导入多个xml引入报错<include>

    struts.xml <?xml version="1.0" encoding="UTF-8"?> <!-- 指定Struts 2配置文件的D ...

  8. Simple GB28181 System

    I. Deployment  / Architecture Block Diagram II. Resources Used 1. freeswitch —— sip server and media ...

  9. Windows 10 系统获取密钥方法

    方法一: 快捷键 win+R 打开运行窗口,输入 regedit 打开注册表编辑器,选择 HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\Windows NT\Curren ...

  10. 高精乘（fft板子

    哇..fft的原理真的是不太好懂,看了好久许多细节还是不太清楚,但感觉本质就是用了单位根的性质. https://www.luogu.org/problem/P1919 #include<cst ...