AngularJs仿淘宝购物车
<!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-route.js"></script>
<script>
//应用程序
var app = angular.module("myApp", []);
//主控制器
app.controller("myCtrl", function($scope) {
$scope.users = [{
id: 1,
names: "iphone",
name: "张三",
sjh: 1227272727,
pice: 5999,
cs: "上海",
xdsj: 24,
zt: "发货"
},
{
id: 2,
names: "西瓜",
name: "李四",
sjh: 5872782782872,
pice: 366,
cs: "北京",
xdsj: 24,
zt: "已发货"
},
{
id: 3,
names: "桃子",
name: "王五",
sjh: 88727827827,
pice: 477,
cs: "广州",
xdsj: 24,
zt: "已收货"
}
];
$scope.addshow = false;
//添加用户的方法
$scope.add = function() {
$scope.addshow = true;
}
$scope.submitAdd = function() {
if($scope.names == null || $scope.name == null || $scope.sjh == null || $scope.cs == null) {
alert("用户信息不可为空");
} else {
$scope.users.push({
names: $scope.names,
name: $scope.name,
sjh: $scope.sjh,
cs: $scope.cs,
check: false
});
alert("提交成功");
$scope.addshow = false;
}
}
});
</script>
</head>
<body ng-app="myApp" ng-controller="myCtrl">
<center>
<div style="margin-top: 30px;">
<input placeholder="用户名搜索" size="10" />
<input placeholder="手机号搜素" size="10" />
<select>
<option>选择城市</option>
<option>北京</option>
<option>上海</option>
<option>广州</option>
<option>深圳</option>
</select>
<select>
<option>选择状态</option>
<option>发货</option>
<option>已发货</option>
<option>待发货</option>
<option>已收货</option>
</select>
<select>
<option>开始月份</option>
<option>一月</option>
<option>二月</option>
<option>三月</option>
<option>四月</option>
<option>五月</option>
<option>六月</option>
<option>七月</option>
<option>八月</option>
<option>九月</option>
<option>十月</option>
<option>十一月</option>
<option>十二月</option>
</select>-
<select>
<option>结束月份</option>
<option>一月</option>
<option>二月</option>
<option>三月</option>
<option>四月</option>
<option>五月</option>
<option>六月</option>
<option>七月</option>
<option>八月</option>
<option>九月</option>
<option>十月</option>
<option>十一月</option>
<option>十二月</option>
</select>
</div>
<div style="margin-right: 398px; margin-top: 15px;">
<input type="button" value="新增订单" style="background: firebrick;" ng-click="add()" />
<input type="button" value="批量发货" style="background: firebrick;" />
</div>
<div style="margin-top: 15px;">
<table border="1" cellspacing="0" cellpadding="10">
<thead>
<tr>
<th><input type="checkbox" /> </th>
<th>ID<input type="button" value="排序" style="background: firebrick;" /></th>
<th>商品名称</th>
<th>用户名</th>
<th>手机号</th>
<th>价格<input type="button" value="排序" style="background: firebrick;" /></th>
<th>城市</th>
<th>下单时间<input type="button" value="排序" style="background: firebrick;" /></th>
<th>状态</th>
</tr>
</thead>
<tbody>
<tr style="{{$even?'background-color: #f1f1f1':''}}" ng-repeat="user in users ">
<td><input type="checkbox" /></td>
<td>{{user.id}}</td>
<td>{{user.names }}</td>
<td>{{user.name }}</td>
<td>{{user.sjh}}</td>
<td>{{user.pice }}</td>
<td>{{user.cs}}</td>
<td>{{user.xdsj}}</td>
<td><a href="#">{{user.zt}}<</a></td>
</tr>
</tbody>
</table>
</div>
<div ng-show="addshow">
<h4>新增订单</h4>
<span>商品名称:</span> <input placeholder="6-20个字符" type="text" ng-model="names"><br />
<span>用户名:</span><input placeholder="4-16个字符" type="text" ng-model="name"><br />
<span>手机号:</span><input type="text" ng-model=" sjh"><br />
<span>城市:</span>
<select ng-model="cs">
<option>选择城市</option>
<option>北京</option>
<option>上海</option>
<option>广州</option>
</select><br />
<div style="background: cadetblue; width: 280px; height: 400px;" >
<ul>
<li>商品名不能为空</li>
<li>商品名必须是6-20个字符</li>
</ul>
</div>
<button style="margin-top: 30px" ng-click="submitAdd()">确认</button>
</div>
</center>
</body>
</html>
AngularJs仿淘宝购物车相关推荐
- Android一点 仿淘宝购物车动画
首先看看ios上的淘宝购物车的动画效果ios淘宝购物车动画 我们实现的效果 看特效是分为两个界面,一个是主view,一个是弹出层.弹出层是用dialog实现的,只是加入了弹出的动画,这里就不分析了,我 ...
- Android仿淘宝购物车
最近项目需要实现类似淘宝购物车的功能,仿了一个,直接上代码: public class MainActivity extends Activity implements OnCartListener, ...
- 仿淘宝购物车demo 增加和减少商品数量
分享一下我老师大神的人工智能教程!零基础,通俗易懂!http://blog.csdn.net/jiangjunshow 也欢迎大家转载本篇文章.分享知识,造福人民,实现我们中华民族伟大复兴! 在上一篇 ...
- 仿淘宝购物车demo---增加和减少商品数量
在上一篇博客中,小编简单的介绍了如何使用listview来实现购物车,但是仅仅是简单的实现了列表的功能,随之而来一个新的问题,买商品的时候,我们可能不止想买一件商品,想买多个,或许有因为某种原因点错了 ...
- 高仿淘宝购物车分分钟让你集成
前言 做商城类电商app购物车确实一直是一个难点,为什么难呢? 主要原因呢是他里面的逻辑复杂,然后 百度的资源好像都不太理想,好多就是一个简单的listView来实现根本就达不到开发的需求.然后 一般 ...
- 仿淘宝购物车商品颜色、尺寸选择。
仿淘宝购买商品颜色.尺寸选择. 选项分为三种状态:可选.选中.不可选 上图看效果: 1,展示页 2,选中一个颜色,不支持的尺寸会自动变灰,成为不可点击状态 如果选择的是尺寸,同样颜色也可以自动筛选可以 ...
- vue实例--仿淘宝购物车
下面是一张众所周知的淘宝购物车页面,今天要讲解的案例就是用vue.js做一个类似的页面 首先简单介绍一下可能会用到的一些vue.js的用法: v-bind,绑定属性:例如v-bind:class=&q ...
- Android 仿淘宝购物车实现
功能基本和淘宝购物车一样,商品按照店铺分类显示,全选,反选,选中商品数量变化,总价随之变化.效果图 思路:店铺和商品都增加一个select属性,列表的CheckBox选择或未选中状态改变同时设置店铺和 ...
- Android仿淘宝购物车demo
分享一下我老师大神的人工智能教程!零基础,通俗易懂!http://blog.csdn.net/jiangjunshow 也欢迎大家转载本篇文章.分享知识,造福人民,实现我们中华民族伟大复兴! 夏的热情 ...
最新文章
- 网站错误记录：A transport-level error has occurred when sending the request to the server.
- java中ssh如何理解
- Elasticsearch-03 CentOS7 / Windows上部署Elasticsearch5.6.16集群模式
- Freemarker模板嵌套
- boost::bron_kerbosch_all_cliques用法的测试程序
- C语言实现排名算法和排位算法
- MouseOut与RollOut，MouseOver与RollOver
- 网络爬虫之httpclient的使用
- 做折线图_python的visvis库做折线图（line.py）代码详解
- 【英语学习】【English L06】U05 Appointments L2 I'd like to make an airport shuttle service reservation
- 数据库原理—数据库基础（二）
- NLP硬核入门-Seq2Seq和Attention机制
- .doc文件不显示word图标
- 研究开源的C++的RTB广告系统，通过centos7镜像，解决各种环境问题，使用boost库
- 世纪佳缘 小秘书 （可自动吸引异性关注）
- 垃圾收集概述和垃圾收集算法（超详细介绍）
- windows系统的定时任务
- maven lastUpdated 文件清理脚本
- 修復Windows無法存取指定的裝置路徑或檔案
- java 图形 登录_java登录图形界面 - osc_994n5tsc的个人空间 - OSCHINA - 中文开源技术交流社区...