效果截图：

说明：引入bootstrap.min.css样式库和angular.min.js的静态资源库，实现列表内容的增加和删除操作。

AngularJS代码：

    <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>

    <script>

        angular.module('myapp',[])

               .controller('myctrl',function($scope){

                       $scope.item = '';

                       $scope.items = [];

                       //增加列表项方法

                       $scope.add = function(){

                           $scope.items.push($scope.item);

                       }

               })

    </script>

HTML代码：

<!DOCTYPE html>

<html lang="en" ng-app="myapp">

<head>

    <meta charset="UTF-8">

    <title>AngularJS实现列表内容项的增加、删除</title>

    <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/4.0.0-alpha.2/css/bootstrap.min.css"/>

</head>

<body style="padding: 20px">

    <div class="container" ng-controller="myctrl">

        <div class="row">

            <div class="col-md-offset-2 col-md-5">

            <div class="input-group">

                <input type="text" class="form-control" ng-model="item">

                <span class="input-group-btn">

                    <button class="btn btn-primary" ng-click="add()">增加内容</button>

                </span>

            </div>

            </div>

        </div>

        <div class="row">

            <div class="col-md-offset-2 col-md-5">

                <h6 style="margin-top: 10px;" ng-if="items.length>0">列表内容：</h6>

                <div class="list-group">

                    <div class="list-group-item" ng-repeat="item in items track by $index">

                        {{item}} <a href="#" ng-click="items.splice($index,1)">删除</a>

                    </div>

                </div>

            </div>

        </div>

    </div>

</body>

</html>

AngularJs学习——实现列表内容项的增加删除的更多相关文章

  1. Python学习-列表的转换和增加操作

    列表的转换和增加操作 列表的转换操作:可以将一个元组,字符串等转换成列表. str = "liuwenhao"; print(list(str)); // ['l', 'i', ' ...

  2. css权威指南学习笔记--列表与生成内容

    列表属性 1.list-style-type:css2多于css2.1 2.list-style-image:有继承,子级列表会继承该图像 3.list-style-position:inside|o ...

  3. AngularJs学习笔记--E2E Testing

    原版地址:http://docs.angularjs.org/guide/dev_guide.e2e-testing 当一个应用的复杂度.大小在增加时,使得依靠人工去测试新特性的可靠性.抓Bug和回归 ...

  4. angularJS学习资源最全汇总

    基础 官方: http://docs.angularjs.org angularjs官方网站已被墙,可看 http://www.ngnice.com/: 官方zip下载包 https://github ...

  5. Python学习02 列表 List

    Python学习02 列表 List Python列表 List Python中的列表(List)用逗号分隔,方括号包围(comma-separated values (items) between ...

  6. AngularJs学习笔记--directive

    原版地址:http://code.angularjs.org/1.0.2/docs/guide/directive Directive是教HTML玩一些新把戏的途径.在DOM编译期间,directiv ...

  7. AngularJs学习笔记--concepts(概念)

    原版地址:http://code.angularjs.org/1.0.2/docs/guide/concepts 继续.. 一.总括 本文主要是angular组件(components)的概览,并说明 ...

  8. AngularJS学习笔记2——AngularJS的初始化

    本文主要介绍AngularJS的自动初始化以及在必要的适合如何手动初始化. Angular <script> Tag 下面通过一小段代码来介绍推荐的自动初始化过程: <!doctyp ...

  9. python2.7 学习笔记--列表的使用

    同其它编程语言一样,python也提供了丰富的数据结构,以方便数据的处理.本文介绍两种最基本的数据集合,列表和元组的使用. 一.列表使用介绍 可以理解为一个有序的序列.其使用方式举例如下: list= ...

随机推荐

  1. 基于Ubuntu Server 16.04 LTS版本安装和部署Django之（一）：安装Python3-pip和Django

    近期开始学习基于Linux平台的Django开发,想配置一台可以发布的服务器,经过近一个月的努力,终于掌握了基于Apache和mod-wsgi插件的部署模式,自己也写了一个教程,一是让自己有个记录,二 ...

  2. 1511: [POI2006]OKR-Periods of Words

    1511: [POI2006]OKR-Periods of Words https://www.lydsy.com/JudgeOnline/problem.php?id=1511 题意: 对于一个串的 ...

  3. Python未彻底测试的项目

    第一 socket 第二 twisted 第三 tornado 第四 微信网页版本登录 第五:进程,线程,协程间关系 第六:TCP三次握手 第七:堡垒机 第八:重写django admin

  4. nexys4-DDR开发板温度传感器ADT7420U

    1. 用这个板子做个什么功能来学习?板子上有个温度传感器,看下官方是否有例程,板子售价1780元,相当的贵,下面是I2C接口, 看下芯片的引脚图 2. 资料下载地址,得注册账号 https://ref ...

  5. 解析车辆VIN码识别（车架号识别）系统

    很多人在购买车辆的时候,只关注性能.外观.内饰等,其实真正的内行是首先看车辆的VIN码,也叫车架号码. VIN码(车架号码)是一辆车的唯一身份证明,一般在车辆的挡风玻璃处,有的在车辆防火墙上,或B柱铭 ...

  6. 第六篇 常用请求协议之post put patch 总结

    [转]https://blog.csdn.net/sshfl_csdn     感谢愿意总结分享的人,thanks idempotent 幂等的 如果一个方法重复执行多次,产生的效果是一样的,那就是i ...

  7. Python 学习笔记之—— PIL 库

    PIL,全称 Python Imaging Library,是 Python 平台一个功能非常强大而且简单易用的图像处理库.但是,由于 PIL 仅支持到Python 2.7,加上年久失修,于是一群志愿 ...

  8. 数据结构7——BFS

    一.重拾关键 宽度优先搜索,也有称为广度优先搜索,简称BFS.类似于树的按层次遍历的过程. 初始状态:图G所有顶点均未被访问过,任选一点v. 遍历过程:假设从图中某顶点v出发,在访问了v之后依次访问v ...

  9. 详解python 局部变量与全局变量

    本文将详细分析python的全局变量与局部变量,学过php的人都知道,php里面的全局变量是无法在function里面去使用的,只有超全局变量才可以,那么python会怎么处理全局变量与局部变量呢?下 ...

  10. lintcode-133-最长单词

    133-最长单词 给一个词典,找出其中所有最长的单词. 样例 在词典 { "dog", "google", "facebook", &quo ...