<!doctype html>

<html lang="en" ng-app>

<head>

<meta charset="UTF-8">

<title>用ng搭建一个简单的购物系统</title>

<link rel="stylesheet" href="css/bootstrap.min.css">

<script type="text/javascript" src="js/angular.min.js"></script>

<style type="text/css">

input[type=button]{

    font-size: 12px;

}

input[type=text]{

    width: 35px;

}

input[name=quantity]{

    width : 100px;

}

input[name=title]{

    width: 100px;

}

</style>

</head>

<body>

<div ng-controller="ShopListController">

    <table class="table table-striped table-bordered">

        <thead>

            <th>ID</th>

            <th>商品名</th>

            <th>单价</th>

            <th>数量</th>

            <th>总价</th>

            <th>操作</th>

        </thead>

        <tbody>

            <!-- 迭代 -->

            <tr ng-repeat="item in items">

                <td>{{item.id}}</td>

                <td>{{item.title}}</td>

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

                <td>{{item.quantity}}</td>

                <td>{{item.price*item.quantity}}</td>

                <td>

                    <input type="button" value="删除当前商品" ng-click="removeList($index)">

                    <input type="button" ng-model="item.quantity" value="+" ng-click="addQ($index)">

                    <input type="button" ng-model="item.quantity" value="-" ng-click="removeQ($index)">

                </td>

            </tr>

        </tbody>

    </table>

    <input type="button" value="添加一条记录" ng-click="addList()">

</div>

<script type="text/javascript">

var items =  [

        {

            id : '2' ,

            title : '康师傅牛肉面',

            quantity : 5 ,

            price : 20

        },

        {

            id : '3' ,

            title : '奶粉',

            quantity : 100 ,

            price : 5

        },

        {

            id : '5' ,

            title : '王老吉',

            quantity : 4,

            price : 15

        },

        {

            id : '1' ,

            title : '数码相机',

            quantity : 1 ,

            price : 6000

        },

        {

            id : '4' ,

            title : 'ipad mini',

            quantity : 2 ,

            price : 2300

        }

    ];

function ShopListController($scope){

    $scope.items = items;

    $scope.removeList = function(index){

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

    };

    // 不用再传参数

    $scope.addList = function(){

        $scope.items.splice(1,0,{

            id : '4' ,

            title : 'ipad mini',

            quantity : 2 ,

            price : 2300

        });

    };

    $scope.addQ = function(index){

        $scope.items[index].quantity++;

    };

    $scope.removeQ = function(index){

        var q = $scope.items[index].quantity;

        if(q == 0){

            return false;

        }

        $scope.items[index].quantity--;

    }

}

</script>

</body>

</html>

argularJS学习笔记-增删改的更多相关文章

  1. JDBC学习笔记——增删改查

    1.数据库准备  要用JDBC操作数据库,第一步当然是建立数据表: ? 1 2 3 4 5 6 CREATE TABLE `user` (   `id` int(11) NOT NULL AUTO_I ...

  2. MySQL学习笔记——增删改查

    有关数据库的DML操作 -insert into -delete.truncate -update -select -条件查询 -查询排序 -聚合函数 -分组查询 DROP.TRUNCATE.DELE ...

  3. MongoDB学习之--增删改查（1）

    本文是对mongodb学习的一点笔记,主要介绍最简单的增删改操作,初学,看着API,有什么错误,希望大家指正:(使用官方驱动) 1.增 增加操作是最简单的,构造bsonDcument插入即可: 方式1 ...

  4. ASP.NET MVC and jqGrid 学习笔记 6-增删改操作

    程序结构: Member.cs CRUD.cshtml CRUD.js HomeController 一.Model public class Member { [Key] public int No ...

  5. jdbc编程学习之增删改查（2）

    一,enum类型的使用 在SQL中没有布尔类型的数据,我们都使用过布尔类型,当属性的值只用两种情况时.例如性别等.那在数据库对这些属性的值个数比较少时我们应该使用什么数据类型呢?SQL给我们提供了枚举 ...

  6. mongoose学习笔记2--增删改查1

    查询 之前我们的集合已经创建成功,我们就先来进行第一步操作 —— 查询. 查询分很多种类型,如条件查询,过滤查询等等,今天只学习了最基本的find查询. 举例: 1.find查询: obj.find( ...

  7. Entity Framework学习 - 2.增删改查

    1.增加数据 PirateBayEntities db = new PirateBayEntities(); T_Tests test = new T_Tests(); test.Name = &qu ...

  8. Mybatis学习——基本增删改查(CRUD)

    Eclipse+Mybatis+MySql 1.所需jar 2.项目目录 3.源代码 package com.zhengbin.entity; public class Student { priva ...

  9. Entity Framework快速入门笔记—增删改查

    第一步:创建一个控制台应用程序,起名为EFDemo 2. 第二步:创建一个实体模型 (1)在EFDemo项目上面右击选择添加—新建项—在已安装的选项中选择数据—ADO.NET实体对象模型,如图所示: ...

随机推荐

  1. A*算法解决八数码问题 Java语言实现

    0X00 定义 首先要明确一下什么是A*算法和八数码问题? A*(A-Star)算法是一种静态路网中求解最短路径最有效的直接搜索方法也是一种启发性的算法,也是解决许多搜索问题的有效算法.算法中的距离估 ...

  2. org.apache.hadoop.conf-Configuration

    终于遇到第一块硬骨头 Hadoop没有使用java.util.Properties管理配置文件,而是自己定义了一套配置文件管理系统和自己的API. package org.apache.hadoop. ...

  3. sql server 中将由逗号“，”分割的一个字符串，转换为一个表，并应用与 in 条件

    ,,) 这样的语句和常用,但是如果in 后面的 1,2,3是变量怎么办呢,一般会用字符串连接的方式构造sql语句 string aa="1,2,3"; string sqltxt= ...

  4. 【源码】初探C#爬虫，持续更新中。。。

       最近看到园子里有人用python做的爬虫软件并且上传的源码,苦于不懂python,便想着用C#也实现一个简易的爬虫软件.于是昨晚花了一个多小时的时间实现了一个简单的爬虫软件,功能十分简单,但是觉 ...

  5. [Java] Web开发HTTP状态码整理

    HTTP状态码(HTTP Status Code)是用以表示网页服务器HTTP响应状态的3位数字代码.它由 RFC 2616 规范定义的,并得到RFC 2518.RFC 2817.RFC 2295.R ...

  6. Android（java）学习笔记67：多线程程序练习

    需求: 某电影院目前正在上映贺岁大片,共有100张票,而它有3个售票窗口售票,请设计一个程序模拟该电影院售票. 两种方式实现 A:继承Thread类 B:实现Runnable接 1. 首先我们利用方式 ...

  7. B-tree解释

    1 .B-树定义 B-树是一种平衡的多路查找树,它在文件系统中很有用. 定义:一棵m 阶的B-树,或者为空树,或为满足下列特性的m 叉树:⑴树中每个结点至多有m 棵子树:⑵若根结点不是叶子结点,则至少 ...

  8. hdu 1530 最大团模板

    说明摘自:pushing my way 的博文 最大团 通过该博主的代码,总算理解了最大团问题,但是他实现时的代码效率却不算太高.因此在最后献上我的模板.加了IO优化目前的排名是: 6 yejinru ...

  9. 转: 58同城高性能移动Push推送平台架构演进之路

    转: http://geek.csdn.net/news/detail/58738 文/孙玄 本文详细讲述58同城高性能移动Push推送平台架构演进的三个阶段,并介绍了什么是移动Push推送,为什么需 ...

  10. 使用secureCRT连接VMware-Ubuntukylin虚拟机

    使用SecureCRT连接VMware时总是提醒主机拒绝连接.这时可以使用sudo apt-get install openssh-server openssh-client,在主机上安装ssh. 安 ...