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实体对象模型,如图所示: ...
随机推荐
- windows下搭建svn服务端、客户端
1.安装SVN服务器subversion以及客户端TortoiseSVN,在网上下载windows版的subversion,TortoiseSVN并安装,比如我的服务端安装在了D:\Program F ...
- 在应用程序中实现对NandFlash的操作
以TC58NVG2S3ETA00 为例: 下面是它的一些物理参数: 图一 图二 图三 图四 图五 图6-0 图6-1 说明一下,在图6-1中中间的那个布局表可以看做是实际的NandFlash一页数据的 ...
- dpkg的用法
转载:http://blog.csdn.net/sunjiajiang/article/details/7252593 dpkg是一个Debian的一个命令行工具,它可以用来安装.删除.构建和管理De ...
- java 删除字符串中的反斜杠\
Java中有时候会打印出来会含有反斜杠(\)的字符串,我们需要删除时,可以使用 replace() 或 replaceAll() 但是要注意的是replaceAll()里面用的是正则表达式,所以一个斜 ...
- iOS 多线程讲解
//同步操作用途 dispatch_queue_t queue = dispatch_get_global_queue(0, 0); dispatch_sync(queue, ^{ NSLog(@&q ...
- iOS平常注意1
在写oc代码时的注意有一些错误看看各位朋友在平常注意了编写是的小错误我也会不断总结的 1. [NSTimer scheduledTimerWithTimeInterval:1 target:self ...
- MongoDB - MongoDB CRUD Operations, Query Documents, Project Fields to Return from Query
By default, queries in MongoDB return all fields in matching documents. To limit the amount of data ...
- Part 71 Code snippets in visual studio
- CSS之拖拽1
PageX:鼠标在页面上的位置,从页面左上角开始,即是以页面为参考点,不随滑动条移动而变化. clientX:鼠标在页面上可视区域的位置,从浏览器可视区域左上角开始,即是以浏览器滑动条此刻的滑动 到的 ...
- hive安装配置错误
1.Access denied for user 'hive'@'localhost' (using password: YES) 解决办法: 执行 hive --service metastore ...