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实体对象模型,如图所示: ...
随机推荐
- MySQL ALTER语法的运用方法 && 操作索引和字段
语法:alter_specification: ADD [COLUMN] create_definition [FIRST | AFTER column_name ] or ADD INDEX [in ...
- ubutun中安装nginx
一.安装 sudo wget http://nginx.org/download/nginx-1.4.4.tar.gz sudo tar zxvf ng....cd nginx-1.4.4sudo . ...
- iOS （UIButton封装）仿糯米首页缩放“按钮”效果
前言 过年期间,少不了各种聚会,当下聚会大多数情况下自然是团购,然后就是用各种APP...使用度娘糯米时(不是广告,不是广告,不是广告!),偶然注意到了它的首页中一个有意思的效果,就是那些“按钮”点击 ...
- js数组的管理[增,删,改,查]
今天在设计表单的时候遇到对数组的一些处理的问题,比如说怎么创建一个数组,然后牵扯到数组的增删改查的方法.请看API FF: Firefox, N: Netscape, IE: Internet Exp ...
- C#操作串口总结
Technorati 标签: C#,SerialPort,ReadTo,ReadTimeout 最近几天一直在调一个要长时间连续不断的操作串口,并且是多线程运行,不允许中断的服务.后来服 ...
- 2dx关于js响应layer触摸消息的bug
cocos2dx关于js响应layer触摸消息的bug cocos2d-x 3.7 问题描述: 目前这个版本中(3.7),c++层的layer触摸消息只能通过消息的方式发送给js,不能像lua一样直接 ...
- wamp修改多站点配置
本文介绍如果在wamp中修改配置支持多站点. 第1步,修改httpd.conf,增加8080端口的监听 #Listen 12.34.56.78:80Listen 80Listen 8080 第2步,修 ...
- UITabBarItem编写的时候出现得图片显示异常，和有一些比较忽略的方法总结
我现在学到可分栏控制器,UITabBarController.我总结了它的层次有,UITabBarController控制并且只有以个UITanBat(他是一个UIIView的子类),UITabBar ...
- maven 添加中央仓库中没有的jar
jar文件需要放到当前目录下,执行以下命令,设置 groupId,artifactId,version信息,方便项目pom引用 mvn install:install-file -Dfile=xxx. ...
- Linux+Apache+Php+Oracle 基础环境搭建
前言: 不能保证100%一次通过,每个系统都会或多或少有区别,如果缺少某些依赖包的话,还请见谅 1.安装Apache需要编译安装的包,各官方网站下载 ...