购物车 Angular

最新推荐文章于 2019-06-11 15:57:18 发布
最新推荐文章于 2019-06-11 15:57:18 发布
阅读量265 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/iemonade_ch/article/details/79089009
版权

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>商品订单信息管理</title>
<script type="text/javascript" src="../js/angular.js"></script>
<script type="text/javascript" src="../js/angular.min.js"></script>
<style>
table {
text-align: center;
}

button {
border-radius: 15%;
background: aqua;
}
</style>
<script>
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {

//创建数组
$scope.goods = [{
id: 2,
uname: "铅笔",
name: "张三",
call: "123456",
price: 5,
city: "北京",
data: new Date(),
state: "已发货"    }];

//添加
$scope.add = function() {
if($scope.id == "" || $scope.id == undefined || $scope.id == null) {
$scope.add_id = true;
return false;
} else {
$scope.add_id = false;
}

if($scope.uname == "" || $scope.uname == undefined || $scope.uname == null) {
$scope.add_uname = true;
return false;
} else {
$scope.add_uname = false;
}

if($scope.name == "" || $scope.name == undefined || $scope.name == null) {
$scope.add_name = true;
return false;
} else {
$scope.add_name = false;
}
if($scope.call == "" || $scope.call == undefined || $scope.call == null) {
$scope.add_call = true;
return false;
} else {
$scope.add_call = false;
}
if($scope.price == "" || $scope.price == undefined || $scope.price == null) {
$scope.add_price = true;
return false;
} else {
$scope.add_price = false;
}
if($scope.city == "" || $scope.city == undefined || $scope.city == null) {
$scope.add_city = true;
return false;
} else {
$scope.add_city = false;
}
if($scope.data == "" || $scope.data == undefined || $scope.data == null) {
$scope.add_data = true;
return false;
} else {
$scope.add_data = false;
}
if($scope.state == "" || $scope.state == undefined || $scope.state == null) {
$scope.add_state = true;
return false;
} else {
$scope.add_state = false;
}

var mg = /米/g;

var ss = {
id: $scope.id,
uname: $scope.uname.replace(mg, "*"),
name: $scope.name,
call: $scope.call,
price: $scope.price,
city: $scope.city,
data: $scope.data,
state: $scope.state
};

$scope.goods.push(ss);
$scope.id = "";
$scope.uname = "";
$scope.name = "";
$scope.call = "";
$scope.price = "";
$scope.city = "";
$scope.data = "";
$scope.isshow = false;
}

//全选
$scope.qx = function() {
for(i in $scope.goods) {
$scope.goods[i].ck = $scope.checkAll;
}
}
//批量删除
$scope.det = function() {
for(var i = 0; i < $scope.goods.length; i++) {
if($scope.goods[i].ck == true) {
$scope.goods.splice(i, 1);
i--;
}
}
}

//排序
$scope.s = "";
$scope.j = "id";
$scope.orderBy = function(clumn) {
$scope.j = clumn;
if($scope.s == "") {
$scope.s = "-";
} else {
$scope.s = "";
}
}
$scope.orderBy2 = function(clumn) {
$scope.j = clumn;
if($scope.s == "") {
$scope.s = "-";
} else {
$scope.s = "";
}
}
$scope.orderBy3 = function(clumn) {
$scope.j = clumn;
if($scope.s == "") {
$scope.s = "-";
} else {
$scope.s = "";
}
}

});
</script>


</head>

<body ng-app="myApp" ng-controller="myCtrl">
<button ng-click="isshow=true">新增订单</button>
<button ng-click="det()">批量删除</button>
<input placeholder="按商品名称查询" ng-model="sp" />
<input placeholder="按手机号查询" ng-model="phone" />
<select ng-model="zt">
<option value="">-按状态查询-</option>
<option>已发货</option>
<option>未发货</option>
</select>
<br />
<br />
<table border="1px" cellpadding="5" cellspacing="0">
<tr>
<td><input type="checkbox" ng-model="checkAll" ng-click="qx()" /></td>
<td>id<button ng-click="orderBy(id)">排序</button></td>
<td>商品名</td>
<td>用户名</td>
<td>手机号</td>
<td>价格<button ng-click="orderBy2(price)">排序</button></td>
<td>城市</td>
<td>下单时间<button ng-click="orderBy3(data)">排序</button></td>
<td>状态</td>
</tr>
<tr ng-repeat="tt in goods | filter:{uname:sp,call:phone,state:zt} | orderBy:(s+j)">
<td><input type="checkbox" ng-model="tt.ck" /></td>
<td>{{tt.id}}</td>
<td>{{tt.uname}}</td>
<td>{{tt.name}}</td>
<td>{{tt.call}}</td>
<td>{{tt.price | currency:"￥："}}</td>
<td>{{tt.city}}</td>
<td>{{tt.data | date:"MM-dd hh:mm"}}</td>
<td>
<span ng-if="tt.state=='已发货'" style="background:#7FFF00;">已发货</span>
<span ng-if="tt.state=='未发货'" style="background:yellow;"><a href="#" ng-click="tt.state='已发货'">{{tt.state}}</a></span>
</td>
</tr>
</table>

<div ng-show="isshow">
<input placeholder="请输入ID" ng-model="id" type="number" /><span style="background-color: yellow;" ng-show="add_id">id不能为空</span><br />
<input placeholder="请输入商品名" ng-model="uname" /><span style="background-color: yellow;" ng-show="add_uname">商品名不能为空</span><br />
<input placeholder="请输入用户名" ng-model="name" /><span style="background-color: yellow;" ng-show="add_name">用户名不能为空</span><br />
<input placeholder="请输入手机号" ng-model="call" /><span style="background-color: yellow;" ng-show="add_call">手机号不能为空</span><br />
<input placeholder="请输入价格" ng-model="price" /><span style="background-color: yellow;" ng-show="add_price">价格不能为空</span><br />
<select ng-model="city">
<option value="">请选择城市</option>
<option>北京</option>
<option>上海</option>
<option>重庆</option>
</select><span style="background-color: yellow;" ng-show="add_city">城市不能为空</span><br />
<input placeholder="请输入下单时间" ng-model="data" type="date" /><span style="background-color: yellow;" ng-show="add_data">下单时间不能为空</span><br />
<input placeholder="请输入状态" ng-model="state" /><span style="background-color: yellow;" ng-show="add_state">状态不能为空</span><br />
<button ng-click="add()">保存</button>
</div>


</body>
</html>

原来如此。
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Angular 实例（购物车展示）
06-28
Angular入门级代码测试，主要用到的技术：Angular双向绑定，Angular对数组的常规操作
angularJs 购物车模型
weixin_30252155的博客
11-04 92
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <link rel="stylesheet" href="vendor/bootstrap3/css/bootstrap.min.css" /> 6 ...
angular 基本购物车()
xujiuba的博客
01-11 253
table tr:nth-child(even){ background: #EEEEEE; } table tr:nth-child(add){ background: #FFFFFF; } var app=angular.module("myApp",[]); app.controller("myCtrl",function($scope){ //准备数据
（angular）购物车
浅若清兮
04-02 206
&lt;!DOCTYPE html&gt;&lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;&lt;/title&gt; &lt;script src="libs/jquery-3.2.1.min.js" type="text/javascript" ch
Angular购物车
xxb52306的博客
11-19 183
var app=angular.module("myApp",[]);             app.controller("myCtrl",function($scope){                 $scope.goods=[{                              id:290,                              name:"ip
angular.js实现购物车功能
10-19
主要为大家详细介绍了angular.js购物车功能的实现代码，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
angular和BootStrap3实现购物车功能
08-31
主要为大家详细介绍了angular和BootStrap3实现购物车功能的相关资料，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
angular购物车总价计算
04-25
可以简便计算购物车中的商品总价，方便简单，快捷。
Angular购物车编辑器
04-05
我在CodeProject上发布的Angular购物车的Angular编辑器
angular 购物车
wsj19970717的博客
01-19 242
.css1{ background-color: red; } .css2{ background-color: brown; }   数量排序: 数量正序 数量倒序 批量删除 --> 产品编号 产品名称 购买数量 产品单价 产品总价 操
AngularJS-Shop:这是AngularJS的独立插件，可将购物车和购物车功能添加到现有AngularJS应用程序中
05-22
AngularJS商店 -折旧- 这是AngularJS的独立插件，可将购物车和购物车功能添加到现有AngularJS应用程序中。 该插件基于AngularJS和Foundation CSS。 要求： AngualrJS v1.2.15（ ） Zurb Foundation v5（ ） 由于在AngualrJS中越来越受欢迎，我决定开始这个项目。 该项目旨在创建一个可包含在任何提供商店功能的现有angularJS应用程序中的插件。 该项目的目的是创建具有最小占用空间且在此插件之外没有任何依赖关系的商店和购物车功能。 此插件正在开发中，不应在任何生产应用程序中使用 任何希望为这个项目做贡献的人都非常欢迎。 安装 在应用程序的根目录中创建一个名为“ packages”的新目录 在您HTML标记中包含AngularJS-Shop.js脚本< script src="packages
angular购物车
xiaoxianmao666的博客
02-25 164
var app = angular.module("myApp",[]); app.controller("myCtrl",function($scope){ $scope.shoplist = [ {id:'1001',name:'iPhone4s',price:'2000',num:1}, {id:'2001',name:'iPhone5s',price:'3650',num:3},
Angular 搭建购物车
Lakeson
06-11 955
概览 学习文档：https://angular.cn/start app目录 包含应用的组件和模块，我们要写的代码都在这个目录 index.html 整个应用的根html，程序启动就是访问这个页面 main.ts 整个项目的入口点，Angular通过这个文件来启动项目 每个 Angular 应用都有一个根模块，通常命名为AppModule。根模块提供了用来启动应用的引导机制。 一个应用...
购物车功能
Lay_y的博客
09-20 466
HTML： html lang="en" ng-app="cart"> head> meta charset="UTF-8"> title>购物车title> head> body ng-controller="cartCtr"> table class="table table-hover" ng-show="items.length"> caption>Angu
angular实现购物车
Anni__9468的博客
10-21 408
一.实现的效果如下 1.  完成页面布局，如图1.1（button按钮可以用普通按钮）（页面布局合理、代码无误各             5分、共10分） 2.声明数据对象，初始化商品信息，数据自拟且不低于四条（代码、效果各5分） 3.  用ng-repaet指令将对象遍历并渲染到页面中（代码、效果各5分） 4.点击”+”按钮输入框中的数量加1（5分），同时
angular制作简易购物车
热门推荐
这个不能实现
10-15 1万+
<html lang="en"> <head> <meta charset="UTF-8"> <title>购物车</title> <script src="angular.js"></script> <style> table{ border-collapse: collapse; } th,t
angular实现购物车功能
Sophie_U的博客
01-24 1156
一、页面搭建 1、html结构采用BootStrap3来快速创建一个购物车表单样式。 主要功能： A：列表数据所示 B：增加删除端口 C：清空购物车 D：商品数量的增减 E：动态计算商品价格以及总价 <!DOCTYPE html> <html lang="en" ng-app="app"> <head> <meta char
angular+bootstrap写的简易购物车
qq_36341800的博客
07-26 1121
直奔主题吧，抽时间使用angular和bootstrap写了一个简单地购物车，实现商品数量的添加，修改和删除 1. html页面代码 购物车 .container { padding-top: 30px; } .shortA {
angular制作购物车页面
Mydtudysy的博客
09-20 916
html lang="en"> head> meta charset="UTF-8"> title>Titletitle> style> *{ margin: 0; padding: 0; margin-left: 10px; } li{
angular js开发工具
最新发布
08-24
- *3* [NOS:用Angular JS开发6步购物车流程](https://download.csdn.net/download/weixin_42151599/18269436)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值