结果：

代码：

<!DOCTYPE html>

<html ng-app="myApp">

<head lang="en">

  <meta charset="UTF-8">

  <script src="js/angular.js"></script>

  <title></title>

</head>

<body>

<!--

1、搭建MVC的架子

2、构造数据

3、显示

4、实现添加

5、实现删除

-->

<div ng-controller="myCtrl">

  <button ng-click="addToCart()">

    添加

  </button>

  <table>

    <thead>

    <tr>

      <th>单价</th>

      <th>数量</th>

      <th>小计</th>

      <th>删除</th>

    </tr>

    </thead>

    <tbody>

    <tr ng-repeat="obj in cart track by $index">

      <td>{{obj.price}}</td>

      <td>{{obj.count}}</td>

      <td>{{obj.price*obj.count}}</td>

      <td>

        <button

          ng-click="deleFromCart($index)">

          删除

        </button>

      </td>

    </tr>

    </tbody>

  </table>

</div>

<script>

  var app = angular.module('myApp',['ng']);

  app.controller('myCtrl', function ($scope) {

    $scope.cart = [

      {price:40,count:3},

      {price:20,count:2},

      {price:90,count:1}

    ];

    $scope.addToCart = function () {

      var newObj = {

        price:Math.floor(Math.random()*20),

        count:Math.floor(Math.random()*10)

      };

      $scope.cart.push(newObj);

    }

    $scope.deleFromCart = function (index) {

      $scope.cart.splice(index,1);

    }

  })

</script>

</body>

</html>

ng 实现插入和删除的更多相关文章

  1. 我的MYSQL学习心得（八） 插入 更新 删除

    我的MYSQL学习心得(八) 插入 更新 删除 我的MYSQL学习心得(一) 简单语法 我的MYSQL学习心得(二) 数据类型宽度 我的MYSQL学习心得(三) 查看字段长度 我的MYSQL学习心得( ...

  2. Entity Framework 6 Recipes 2nd Edition（10-9）译 -> 在多对多关系中为插入和删除使用存储过程

    10-9. 在多对多关系中为插入和删除使用存储过程 问题 想要在一个无载荷的多对多关系中使用存储过程(存储过程只影响关系的连接表) 解决方案 假设有一个多对多关系的作者( Author)表和书籍( B ...

  3. 与TableView插入、删除、移动、多选，刷新控件

    一.插入.删除.移动.多选 方法一: Cell的插入.删除.移动都有一个通用的方法,就是更新tableView的数据源,再reloadData,这样做实现上是简单一点,但是reloadData是刷新整 ...

  4. Java 集合与队列的插入、删除在并发下的性能比较

    这两天在写一个java多线程的爬虫,以广度优先爬取网页,设置两个缓存: 一个保存已经访问过的URL:vistedUrls 一个保存没有访问过的URL:unVistedUrls 需要爬取的数据量不大,对 ...

  5. 数据结构Java实现03----单向链表的插入和删除

    文本主要内容: 链表结构 单链表代码实现 单链表的效率分析 一.链表结构: (物理存储结构上不连续,逻辑上连续:大小不固定)            概念: 链式存储结构是基于指针实现的.我们把一个数据 ...

  6. 怎么用CorelDRAW插入、删除与重命名页面

    在绘图之前,页面的各种设置也是一项重要的工作,本文主要讲解如何在CorelDRAW中插入.删除.重命名页面等操作.在CorelDRAW的绘图工作中,常常需要在同一文档中添加多个空白页面,删除一些无用的 ...

  7. 二叉查找树的查找、插入和删除 - Java实现

    http://www.cnblogs.com/yangecnu/p/Introduce-Binary-Search-Tree.html 作者: yangecnu(yangecnu's Blog on ...

  8. [改善Java代码]频繁插入和删除时使用LinkedList

    一.分析 前面有文章分析了列表的表里方式,也就是“读”的操作.本文将介绍表的“写”操作:即插入.删除.修改动作. 二.场景 1.插入元素 列表中我们使用最多的是ArrayList,下面看看他的插入(a ...

  9. UITableView的编辑（插入、删除、移动）

    先说两个方法beginUpdates和endUpdates,几点注意事项: 一般我们把行.块的插入.删除.移动写在由这两个方法组成的函数块中.如果你不是在这两个函数组成的块中调用插入.删除.移动方法, ...

随机推荐

  1. Excel数据常用操作，vlookup,text,trim,数据格式导致出错

    数据有缺漏,需要在数据前面补零 =TEXT(F70,"000000") 前面是要操作的数据,后面是补几位 匹配数据(将一个表格中的数据进行匹配) =VLOOKUP(C2,aaa,4 ...

  2. 第四课 Makefile文件的制作(下)

    1序言: 前面一节课讲解了Makefile的基础知识包括原理.预定义以及命令格式,这样是可以完成一个自动编译的文件,这些知识可以帮你完成.想想mak真是强大啊,可能有些同志发现了如果项目文件太多每个目 ...

  3. oracle 建立新的表空间

    创建数据表空间 注意粗斜体部分 create tablespace 表空间名称logging datafile 'D:\app\Administrator\oradata\orcl\XXXX.dbf' ...

  4. java 获取request参数集

    request里有两个方法 request.getParameterMap(); request.getParameterNames(); 我想用这两种方法获取. 1.用request.getPara ...

  5. linux 安装 maven

    一.下载 1.创建下载软件包目录  mkdir /home/install 2.在/home/install下载maven包,或者将下载好的maven压缩包上传至/home/install wget  ...

  6. 【hihocoder】三十九周：二分.归并排序之逆序对

    就是用归并排序求数组中得逆序对.假设数组为a:[2 4 5],和b:[1 3],那么在这一次归并的时候逆序对这样求,belement表示当前result数组中b数组对应的元素个数,total表示逆序对 ...

  7. 理解 $nextTick 的作用

    有同学在看 Vue 官方文档时,对 API 文档中的 Vue.nextTick 和 vm.$nextTick 的作用不太理解. 其实如果看一下深入响应式原理 - vue.js中的有关内容,可能会有所理 ...

  8. 配置windows qt开发环境

    1.解压缩MinGW-gcc440_1.zip.将解压后的文件夹复制至C盘根目录下.2.安装qt-creator-win-opensource-2.5.2.3.安装qt-win-opensource- ...

  9. LAMP脚本

    A goal is a dream with a deadline. Much effort, much prosperity. 环境:CentOS release 6.5  2.6.32-431.e ...

  10. 查看linuxCPU信息

    linux 下查看机器是cpu是几核的 几个cpu more /proc/cpuinfo |grep "physical id"|uniq|wc -l 每个cpu是几核(假设cpu ...