转行学开发，代码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. 存储过程SET XACT_ABORT ON

    设置事务回滚的当为ON时,如果你存储中的某个地方出了问题,整个事务中的语句都会回滚为OFF时,只回滚错误的地方

  2. Echats

    网址:https://www.echartsjs.com 1.特性 ECharts,一个使用 JavaScript 实现的开源可视化库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(I ...

  3. python字典-基础

    一.解释 像列表一样,“字典”是许多值的集合.但不像列表的下标,字典的索引可以 使用许多不同数据类型,不只是整数.字典的索引被称为“键”,键及其关联的值 称为“键-值”对. 二.列表创建方式 1. I ...

  4. [19/05/07-星期二] JDBC(Java DataBase Connectivity)_CLOB(存储大量的文本数据)与BLOB(存储大量的二进制数据)

    一. CLOB(Character Large Object ) – 用于存储大量的文本数据 – 大字段有些特殊,不同数据库处理的方式不一样,大字段的操作常常是以流的方式来处理的.而非一般的字段,一次 ...

  5. Feign负载均衡

    Feign是一个声明式的Web Service客户端,比Ribbon好用,默认也是轮巡.我们只需要使用Feign创建一个接口,并用注解就好了.如果你基于spring cloud发布一个接口,实际上就是 ...

  6. 在a标签中使用了onclick修改样式之后a:hover失效

    是因为优先级的原因造成,使用!important修改优先级. 如修改成: .button1:hover {            color: #FFF !important;            ...

  7. java 中的引用类型

    GC基本原理 GC (Garbage Collection)的基本原理:将内存中不再被使用的对象进行回收,GC中用于回收的方法称为收集器,由于GC需要消耗一些资源和时间,Java在对对象的生命周期特征 ...

  8. linux NFS 服务器的安装

    1. 安装 nfs 服务 [root@allentuns ~]# yum -y install  nfs-utils rpcbind 2. 启动 nfs 服务 [root@allentuns ~]# ...

  9. [Luogu1220]关路灯（区间dp）

    [Luogu1220]关路灯 题目描述 某一村庄在一条路线上安装了n盏路灯,每盏灯的功率有大有小(即同一段时间内消耗的电量有多有少).老张就住在这条路中间某一路灯旁,他有一项工作就是每天早上天亮时一盏 ...

  10. robotframework关键字

    *** Settings ***Library Selenium2Library *** Keywords ***Checkbox应该不被选择 [Arguments] ${locator} Check ...