argularJS学习笔记-增删改
<!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学习笔记-增删改的更多相关文章
- JDBC学习笔记——增删改查
1.数据库准备 要用JDBC操作数据库,第一步当然是建立数据表: ? 1 2 3 4 5 6 CREATE TABLE `user` ( `id` int(11) NOT NULL AUTO_I ...
- MySQL学习笔记——增删改查
有关数据库的DML操作 -insert into -delete.truncate -update -select -条件查询 -查询排序 -聚合函数 -分组查询 DROP.TRUNCATE.DELE ...
- MongoDB学习之--增删改查（1）
本文是对mongodb学习的一点笔记,主要介绍最简单的增删改操作,初学,看着API,有什么错误,希望大家指正:(使用官方驱动) 1.增 增加操作是最简单的,构造bsonDcument插入即可: 方式1 ...
- ASP.NET MVC and jqGrid 学习笔记 6-增删改操作
程序结构: Member.cs CRUD.cshtml CRUD.js HomeController 一.Model public class Member { [Key] public int No ...
- jdbc编程学习之增删改查（2）
一,enum类型的使用 在SQL中没有布尔类型的数据,我们都使用过布尔类型,当属性的值只用两种情况时.例如性别等.那在数据库对这些属性的值个数比较少时我们应该使用什么数据类型呢?SQL给我们提供了枚举 ...
- mongoose学习笔记2--增删改查1
查询 之前我们的集合已经创建成功,我们就先来进行第一步操作 —— 查询. 查询分很多种类型,如条件查询,过滤查询等等,今天只学习了最基本的find查询. 举例: 1.find查询: obj.find( ...
- Entity Framework学习 - 2.增删改查
1.增加数据 PirateBayEntities db = new PirateBayEntities(); T_Tests test = new T_Tests(); test.Name = &qu ...
- Mybatis学习——基本增删改查(CRUD)
Eclipse+Mybatis+MySql 1.所需jar 2.项目目录 3.源代码 package com.zhengbin.entity; public class Student { priva ...
- Entity Framework快速入门笔记—增删改查
第一步:创建一个控制台应用程序,起名为EFDemo 2. 第二步:创建一个实体模型 (1)在EFDemo项目上面右击选择添加—新建项—在已安装的选项中选择数据—ADO.NET实体对象模型,如图所示: ...
随机推荐
- 《嵌入式Linux基础教程学习笔记一》
常用书目下载地址:http://www.cnblogs.com/pengdonglin137/p/3688029.html 第二章 1.进程上下文和中断上下文(Page20) 当应用程序执行系统调用, ...
- 1.7.4.3 Parsers
Parsers 除了主查询解析器外,还有一些其他的查询解析器可以使用或者和主查询解析器连合使用.这部分描述了其他查询解析器的细节,并且给出了一些例子: 大多数的解析器都可以使用局部查询参数的方式来表达 ...
- 『创意欣赏』30幅逼真的 3D 虚拟现实环境呈现
又到周末了,给大家分享30幅漂亮的 3D 虚拟现实环境呈现,放松一下.这些创造性的场景都是通过 3D 图形设计软件,结合三维现实环境渲染制作出来的.一起欣赏:) 您可能感兴趣的相关文章 20幅温馨浪漫 ...
- 【阿里云产品公测】一句话告诉你什么样的人该使用ACE，如何使用ACE
作者:阿里云用户小鸡咕咕 首先回应标题,这一句话就是:看完这篇帖子你就知道了. 前言 写在文章之前,我想先阐述一下写这篇文章的意义.可能大伙就要说了,写这篇文章不就是为了200的代金券吗?错, ...
- 【开源项目5】测滑菜单MenuDrawer的使用以及解析
在安卓中左右侧滑菜单的使用用的比ios多得多,可能是谷歌带的头吧,几乎所有的谷歌应用都有侧滑菜单.谷歌没有开放这个源码,在一个成熟的开源代码出现之前,大家都是各自为战,偶尔能看到一个勉强实现了的.Me ...
- asp.net中Response对象鱼Request对象
在asp.net中Response与Request对象是两个常用的对象,虽然他们长得有点像,但是作用却是截然不同,我们来看一下他们他们都有哪些不同. 一.Response对象主要作用:像浏览器输出信息 ...
- apply和call的区别在哪里
apply:方法能劫持另外一个对象的方法,继承另外一个对象的属性. Function.apply(obj,args)方法能接收两个参数obj:这个对象将代替Function类里this对象args:这 ...
- 使用Word 2013向cnblog发布博文
Windows Live软件许久不更新,就想用手头的Word 2013作为cnblogs博客的撰写工具.在查看cnblogs关于Windows Live的配置说明时,发现下列有Word 2007的配置 ...
- Pascal 语言中字符与字符串
[题目]输入一段文章(255个字符以内),求文章中单词的个数,相同单词只记一次,The 和 the 视作相同. [敲代码] //网友代码 var article,w:string; arr:array ...
- MarkDown认识与入门
Markdown 是一种轻量级的「标记语言」,它的优点很多,目前也被越来越多的写作爱好者,撰稿者广泛使用.看到这里请不要被「标记」.「语言」所迷惑,Markdown 的语法十分简单.常用的标记符号也不 ...