转行学开发，代码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. [mysql相关集锦] 001 - mysql zip安装/The service already exists/MySQL 服务无法启动

    本随笔参考了其他博客内容,且在验证有效之下才或誊抄或摘录或加上自己经验组合而成. 参考博客: 1,https://www.jianshu.com/p/413d29b67422 2,https://bl ...

  2. 【洛谷p1981】表达式求值

    题前废话: 咱也不知道咱写了个什么神奇的代码导致_rqy都看不明白它是怎么re掉的, 代码的大致思路是这样的:对于这样一个中缀表达式,先转化成它的后缀表达式的形式,然后利用P1449 后缀表达式 这道 ...

  3. 【洛谷p1158】导弹拦截

    这道题是个有想法的枚举qwq 导弹拦截[题目链接] 注意:此导弹拦截非彼导弹拦截p1020 导弹拦截 一道题是1999年的,然后我们现在要写的是经过11年韬光养晦之后的导弹拦截 SOLUTION: 要 ...

  4. [Codeforces 1205B]Shortest Cycle(最小环)

    [Codeforces 1205B]Shortest Cycle(最小环) 题面 给出n个正整数\(a_i\),若\(a_i \& a_j \neq 0\),则连边\((i,j)\)(注意i- ...

  5. JS相比TS的缺点（或TS的优点）

    JS只有在运行时,才会抛出错误, JS里有任何的拼写错误 都不会提示错误 JS运行时报的错,指向也未必是错误的源头,也就是说:A类里因为书写代码有误,会造成运行时其他的类报错如B JS无法做到不同pa ...

  6. win32 socket 编程（三）——TCP/IP

    一.TCP/IP解析 TCP/IP协议的核心部分是传输层协议(TCP.UDP),网络层协议(IP)和物理接口层,这三层通常是在操作系统内核中实现.因此用户一般不涉及.编程时,编程界面有两种形式: 1. ...

  7. vue中的scope

    在vue文件中的style标签上,有一个特殊的属性:scoped. 当一个style标签拥有scoped属性时,它的CSS样式就只能作用于当前的组件,也就是说,该样式只能适用于当前组件元素. 通过该属 ...

  8. tail 显示文件内容尾部

    1.命令功能 tail默认显示文件内容尾部10行. 2.语法格式 tail  option  file 参数说明 参数 参数说明 -n 显示指定行数 -f 实时输出文件变化后追加的数据 -s 监视文件 ...

  9. Ubuntu16.04 启用root权限

    装了Ubuntu 16.04之后想使用超级权限对系统进行操作 使用命令 su - 切换超级用户,提示输入密码,却怎么都不对,网上找的资料说是没有启用root权限,于是根据网上提供的方法启用root权限 ...

  10. 前端每日实战：91# 视频演示如何用纯 CSS 创作一个行驶中的火车 loader

    效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/RBLWzJ 可交互视频 此视频是可 ...