结果：

代码：

<!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. python 的两个模块xlwt,xlrd,写入和读取Excel数据

    http://www.cnblogs.com/fireme/p/3887284.html 这上面写的很全,不过我只需要简单的读和写的操作就ok了,下面是我写的读和写入Excel操作 读取Excel数据 ...

  2. Linux vim 操作技巧

    ·Linux设计的重要原则是信息存储在基于文本的文件中 文本文件:无格式文件,作用类似于win的注册表(etc下的配置文件,.conf或者无扩展名)可扩展标记语言(XML),文本标记定义数据结构(et ...

  3. curl类封装

    <?php /**   * @author askwei **/   class CURL   {      private $ch;      private $url = "htt ...

  4. Kattis - cokolada【水】

    Kattis - cokolada[水] 题意 有一个人想吃巧克力,但是巧克力都是按照 2 的幂次的数量包装的,然后他想吃一定数量块的巧克力,然后可以敲碎,每次敲碎都分成两半,比如四块装的分成两块就是 ...

  5. python入门四：异常

    一.异常 异常就是在触发异常条件时(解释器或程序员)而采取相应的措施 c++中异常使用try, throw, catch等关键字,而python中使用try, raise, except等 二.标准异 ...

  6. C# 中与等于 &= 操作符

    MSDN说,x&=y等价于 x=x&y. 整型时&运算符,进行位运算. bool类型时,&运算符,当两边结果都为ture时,结果才为true.

  7. ijkplayer实现IMediaDataSource

    由于ijkplayer不能识别android.resource类型的资源在播放raw中的文件的时候用IjkMediaPlayer不能正常播放,实现IMediaDataSource为IjkMediaPl ...

  8. java没有指针

    先说结论:java没有指针,它使用对象引用来替代指针 备注:c/c++的引用和java的引用完全不是一个东西 c/c++的引用是同一块内存的不同名字 java的引用指向一个对象,引用本身也占用了内存 ...

  9. 新机git及github sshkey简单配置

    新机git简单配置,毕竟不常用,不用每次都查1.安装gitwindows:https://git-scm.com/download/winubuntu: apt install git 2.全局配置 ...

  10. MyBatis正在爬的坑

    换了份工作,开始接触Mybatis,开一篇文章记录一下自己遇到的坑 2018-06-20 今天遇到了一个问题,编好的sql语句在数据库可以执行但是写到程序里边就GG,什么问题呢?一直纠结在程序哪里写错 ...