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实体对象模型,如图所示: ...
随机推荐
- 解决faststone capture在台式机上录制屏幕视频没有声音的问题
点击屏幕录像机: 在弹出的屏幕录像机窗口中选择录制音频,然后点击选项按钮: 在弹出的选项按钮中选择视频选项,将所有的多选框都选中,注:最后一个选项录制windows XP的工具提示最好也选上,我发现如 ...
- IOS 关于ipad iphone5s崩溃 解决
之前 我这一直没有以上两款测试机 于是发布被退回了.说是这两款 开启动就崩. 这种情况下 解决办法只有一个,就是bug重现,不然,你根本无法确定再一次提交是否是安全的.所以我借了一台 iPad mi ...
- [JavaEE] SSH框架笔记_S.S.H框架各自的优缺点
Struts的原理和优点.Struts工作原理MVC即Model-View-Controller的缩写,是一种常用的设计模式.MVC 减弱了业务逻辑接口和数据接口之间的耦合,以及让视图层更富于变化.M ...
- 自动备份并保存最近几天的SQL数据库作业脚本
DECLARE @filename VARCHAR(255) DECLARE @date DATETIME SELECT @date=GETDATE() SELECT @filename = 'G:\ ...
- Android学习笔记⑤——UI组件的学习TextView相关
TextView是一个强大的视图组件,直接继承了View,同时也派生出了很多子类,TextView其作用说白了就是在布局中显示文本,有点像Swing编程中的JLabel标签,但是他比JLabel强大的 ...
- 新手不了解Xcode和mac系统可能犯得错误和我的建议
我是学iOS刚入门的新手,本人装的时黑苹果,我是喜欢完美的人,但黑苹果又是不完美的系统,比如关不了机啊,和显卡驱动不了啊,当自己的电脑出现白屏和卡顿的时候气的没脾气.我是一个新手.开始学的时java但 ...
- Linux公社资料库地址
免费下载地址在 http://linux.linuxidc.com/用户名与密码都是http://www.linuxidc.com
- Storm累计求和中使用各种分组Grouping
Shuffle Grouping: 随机分组, 随机派发stream里面的tuple, 保证bolt中的每个任务接收到的tuple数目相同.(它能实现较好的负载均衡) Fields Grouping: ...
- JSON解析总结2
使用json-lib-2.4-jdk15.jar JSON工具类: import java.util.List; import net.sf.json.JSONArray; import net.sf ...
- centos6.5 iptables实现端口转发
将本地接口IP 61.144.a.b 的3389端口 转发到 116.6.c.d的3389 (主要访问到61.144.a.b的3389端口,就会跳转到116.6.c.d的3389) [步骤] ...