效果截图:

说明:引入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. python基础之反射、面向对象进阶

    isinstance(obj,cls)和issubclass(sub,super) isinstance(obj,cls)检查是否obj是否是类 cls 的对象,如果是返回True 1 class F ...

  2. 扩展报表-JavaSet

    前言 使用商业分析中的扩展报表平台,可以很方便的进行数据分析,进行图表化直观展示.一般情况下使用SQL数据集进行SQL的编写,进而配合扩展报表平台进行数据分析图表的绘制,但SQL数据集针对固定的参数进 ...

  3. 环境变量 - Maven

    Linux 1. 备份并编辑配置文件 # cp /etc/profile /etc/profile.bak # vi /etc/profile 2. 设置Maven环境变量 export MAVEN_ ...

  4. Scala学习笔记(三):基础知识

    有了可运行的环境,就需要写一些简单的语句来认识一下Scala,本文没有写那么详细,只是为了方便查看.唤起回忆 (1)变量的定义方法 Scala有两种变量 var val 注意:在解释器中,可以用一个之 ...

  5. 「学习记录」《数值分析》第二章计算实习题(Python语言)

    在假期利用Python完成了<数值分析>第二章的计算实习题,主要实现了牛顿插值法和三次样条插值,给出了自己的实现与调用Python包的实现--现在能搜到的基本上都是MATLAB版,或者是各 ...

  6. C 计算金额

    #include <stdio.h> int main(int argc, char **argv) { \\定义两个变量 a金额 z跟票面 int a=0; int z=0;\\ 输入金 ...

  7. eclipse安装问题

    eclipse安装之前需要安装JDK. 注意:eclipse和JDK需要一致,如都是64位或者都是32位. 不然会报错.

  8. 【WebService】——入门实例

    服务端 服务: 1.add(int a,int b) 2.minus(int a,int b) 具体如下: <pre name="code" class="java ...

  9. HighCharts中几种tooltip的显示格式

    推荐学习地址 => https://www.hcharts.cn/docs/basic-tooltip   https://api.hcharts.cn/#Highcharts.numberFo ...

  10. 【转】关于Java并发编程的总结和思考

    一.前言 就是想学习Java并发编程了,所以转载一下这篇认为还不错的博客~ 二.正文 编写优质的并发代码是一件难度极高的事情.Java语言从第一版本开始内置了对多线程的支持,这一点在当年是非常了不起的 ...