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实体对象模型,如图所示: ...
随机推荐
- arm linux kernel 从入口到start_kernel 的代码分析
参考资料: <ARM体系结构与编程> <嵌入式Linux应用开发完全手册> Linux_Memory_Address_Mapping http://www.chinaunix. ...
- 在应用程序中实现对NandFlash的操作
以TC58NVG2S3ETA00 为例: 下面是它的一些物理参数: 图一 图二 图三 图四 图五 图6-0 图6-1 说明一下,在图6-1中中间的那个布局表可以看做是实际的NandFlash一页数据的 ...
- Using ASP.Net WebAPI with Web Forms
Asp.Net WebAPI is a framework for building RESTful HTTP services which can be used across a wide ran ...
- 1.7.4.3 Parsers
Parsers 除了主查询解析器外,还有一些其他的查询解析器可以使用或者和主查询解析器连合使用.这部分描述了其他查询解析器的细节,并且给出了一些例子: 大多数的解析器都可以使用局部查询参数的方式来表达 ...
- AsyncTask的介绍
android AsyncTask介绍 AsyncTask和Handler对比 1 ) AsyncTask实现的原理,和适用的优缺点 AsyncTask,是android提供的轻量级的异步类,可以直接 ...
- [Java] HashMap详解
转自:http://alex09.iteye.com/blog/539545 HashMap 和 HashSet 是 Java Collection Framework 的两个重要成员,其中 Hash ...
- Linux重定向的理解
/* 重定向的实例 dup2函数 利用filefd来代替STDOUT(标准输出流),write写入filefd的数据,重定向写出到STDOUT中: */ #include <stdio.h> ...
- JQuery方法扩展
第一种 extend <!-- extend 扩展jQuery,其实就是增加一个静态方法 --> 定义: $.extend({ sayHello:function(name) { aler ...
- virsh default启动失败原因分析及解决
启动default时出现如下错误提示:[root@node1 ~]# virsh net-start defaulterror: Failed to start network defaulterro ...
- js实现shell排序
//shell排序配插入排序function shell_insert_sort(arr){ var gap = arr.length; do{ gap = parseInt(gap/3) + 1; ...