angularjs购物车

最新推荐文章于 2019-08-05 04:26:52 发布
最新推荐文章于 2019-08-05 04:26:52 发布
阅读量233 收藏
点赞数
分类专栏： IT
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/gongyaqi/article/details/78604346
版权
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />

<style>
tbody tr:nth-child(even){
background: aqua;
}
tbody tr:nth-child(odd){
background: aliceblue;
}
thead tr{
background: #474747;
}


</style>

<title></title>
<script type="text/javascript" src="js/jquery-2.1.0.js" ></script>
<script type="text/javascript" src="js/angular-route.js" ></script>
<script type="text/javascript" src="js/angular.min.js" ></script>
<script>
var app=angular.module("myapp",[]);
app.filter("guolv",function(){

return function(input){
return input.replace(/米/g,"*");
}
});



app.controller("tres",["$scope","$filter",function($scope,$filter){
$scope.detes=[{"sid":1,"key1":false,"spin":"小米 R9sk","name":"刘备","tel":13733205441,"pric":2999,"cid":"天津","xon":"发货","time":"03-09 10:30"},{"sid":2,"key1":false,"spin":"OppO R9sk","name":"刘秀","tel":15633205441,"pric":2999,"cid":"北京","xon":"发货","time":"03-09 10:30"},
{"sid":3,"key1":false,"spin":"努比亚Z17","name":"张飞","tel":13645454545,"pric":1999,"cid":"呼和浩特","xon":"发货","time":"04-15 09:25"},
{"sid":4,"key1":false,"spin":"黑莓","name":"赵四","tel":13550058945,"pric":899,"cid":"安阳","xon":"发货","time":"06-19 10:20"},
{"sid":5,"key1":false,"spin":"华为 ment10 pro","name":"白起","tel":13544567894,"pric":7999,"cid":"舟山","xon":"发货","time":"08-23 10:00"},
{"sid":6,"key1":false,"spin":"华为 P10","name":"陈胜","tel":17845617894,"pric":4199,"cid":"南京","xon":"发货","time":"07-25 10:30"},
{"sid":7,"key1":false,"spin":"HUAWEI mete10保时捷","name":"王五","tel":15688886666,"pric":9899,"cid":"北京","xon":"发货","time":"05-29 10:50"},{"sid":8,"key1":false,"spin":"OppO R9sk","name":"刘章","tel":13633205441,"pric":2999,"cid":"天津","xon":"发货","time":"03-09 10:30"},{"sid":9,"key1":false,"spin":"OppO R9sk","name":"刘表","tel":13833205441,"pric":2999,"cid":"石家庄","xon":"发货","time":"03-09 10:30"}];
$scope.dete=$scope.detes;
$scope.yi=1;
$scope.zhuang="选择状态";
$scope.chengshi="选择城市";
$scope.yue="开始月份";
$scope.jie="结束月份";
$scope.shu=[];//判断手机号的
$scope.zu=[];//判断城市的
$scope.tai=[];//判断状态的
$scope.fen=[];

$scope.chaxun=function(){
var fc=$filter("filter");
if($scope.ming!=null&&$scope.ming!=""&&$scope.hao!=0&&$scope.hao!=""&&$scope.chengshi!="选择城市"&&$scope.zhuang!="选择状态"&&$scope.yue!="开始月份"&&$scope.jie!="结束月份"){
$scope.shu=[];
$scope.shu=fc($scope.detes,{"name":$scope.ming});
$scope.dete=[];
$scope.dete=fc($scope.shu,{"tel":$scope.hao});
$scope.zu=[];
$scope.zu=fc($scope.dete,{"cid":$scope.chengshi});
$scope.tai=[];
$scope.tai=fc($scope.zu,{"xon":$scope.zhuang});
$scope.dete=[];
$scope.dete=$scope.tai;



}else if($scope.ming!=null&&$scope.ming!=""&&$scope.hao!=0&&$scope.hao!=""&&$scope.chengshi!="选择城市"&&$scope.zhuang!="选择状态"){
$scope.shu=[];
$scope.shu=fc($scope.detes,{"name":$scope.ming});
$scope.dete=[];
$scope.dete=fc($scope.shu,{"tel":$scope.hao});
$scope.zu=[];
$scope.zu=fc($scope.dete,{"cid":$scope.chengshi});
$scope.tai=[];
$scope.tai=fc($scope.zu,{"xon":$scope.zhuang});
$scope.dete=[];
$scope.dete=$scope.tai;
}

//判断姓名+城市+手机号
else if($scope.ming!=null&&$scope.ming!=""&&$scope.hao!=0&&$scope.hao!=""&&$scope.chengshi!="选择城市"){
$scope.shu=[];
$scope.shu=fc($scope.detes,{"name":$scope.ming});
$scope.dete=[];
$scope.dete=fc($scope.shu,{"tel":$scope.hao});
$scope.zu=[];
$scope.zu=fc($scope.dete,{"cid":$scope.chengshi});
$scope.dete=[];
$scope.dete=$scope.zu;

}

//判断姓名+手机号
else if($scope.ming!=null&&$scope.ming!=""&&$scope.hao!=0&&$scope.hao!=""){$scope.shu=[];
$scope.shu=fc($scope.detes,{"name":$scope.ming});
$scope.dete=[];
$scope.dete=fc($scope.shu,{"tel":$scope.hao});
}

//判断姓名的
else if($scope.ming!=null&&$scope.ming!=""){
$scope.shu=[];
$scope.shu=fc($scope.detes,{"name":$scope.ming});
$scope.dete=[];
$scope.dete=$scope.shu;
}else{
alert("用户名不能为空");
}
}
$scope.su=0;
$scope.idpai=function(){
if($scope.su!=0){
$scope.su=0;
$scope.dete=[];
$scope.dete=$scope.detes;
}else{
$scope.su=1;
var fc=$filter("orderBy");
$scope.dete=[];
$scope.dete=fc($scope.detes,"sid",true);
}
}

$scope.su1=0;
$scope.idpai1=function(){
if($scope.su1!=0){
$scope.su1=0;
$scope.dete=[];
$scope.dete=$scope.detes;
}else{
$scope.su1=1;
var fc=$filter("orderBy");
$scope.dete=[];
$scope.dete=fc($scope.detes,"spin",true);
}
}

$scope.su2=0;
$scope.idpai2=function(){
if($scope.su2!=0){
$scope.su2=0;
$scope.dete=[];
$scope.dete=$scope.detes;
}else{
$scope.su2=1;
var fc=$filter("orderBy");
$scope.dete=[];
$scope.dete=fc($scope.detes,"name",true);
}
}
$scope.su3=0;
$scope.idpai3=function(){
if($scope.su3!=0){
$scope.su3=0;
$scope.dete=[];
$scope.dete=$scope.detes;
}else{
$scope.su3=1;
var fc=$filter("orderBy");
$scope.dete=[];
$scope.dete=fc($scope.detes,"tel",true);
}
}
$scope.su4=0;
$scope.idpai4=function(){
if($scope.su4!=0){
$scope.su4=0;
$scope.dete=[];
$scope.dete=$scope.detes;
}else{
$scope.su4=1;
var fc=$filter("orderBy");
$scope.dete=[];
$scope.dete=fc($scope.detes,"pric",true);
}
}
$scope.su5=0;
$scope.idpai5=function(){
if($scope.su5!=0){
$scope.su5=0;
$scope.dete=[];
$scope.dete=$scope.detes;
}else{
$scope.su5=1;
var fc=$filter("orderBy");
$scope.dete=[];
$scope.dete=fc($scope.detes,"cid",true);
}
}
$scope.su6=0;
$scope.idpai6=function(){
if($scope.su6!=0){
$scope.su6=0;
$scope.dete=[];
$scope.dete=$scope.detes;
}else{
$scope.su6=1;
var fc=$filter("orderBy");
$scope.dete=[];
$scope.dete=fc($scope.detes,"time",true);
}
}

$scope.gaibian=function($index){

if($scope.detes[$index].xon=="发货"){
$scope.detes[$index].xon="已发货"
}else{
$scope.detes[$index].xon="发货"
}



}

//全选反选

$scope.zi=0;
$scope.xuan=function(){
var dc=document.getElementsByName("ns");
if($scope.zi==0){
$scope.zi=1;
for (var i=0;i<$scope.detes.length;i++) {
dc[i].checked=true;
$scope.detes[i].key1=true;
}
}else{
$scope.zi=0;
for (var i=0;i<$scope.detes.length;i++) {
dc[i].checked=false;
$scope.detes[i].key1=false;
}
}
$scope.dete=[];
$scope.dete=$scope.detes;
}








//单个删除
$scope.dele=function(nt){
for (var i=0;i<$scope.detes.length;i++) {
if($scope.detes[i].sid==nt.sid){
$scope.detes.splice(i,1);
}
}
$scope.dete=[];
$scope.dete=$scope.detes;

}

//单个选取
$scope.pu=function(nd){


for (var i=0;i<$scope.detes.length;i++) {
if($scope.detes[i].sid==nd.sid){
if($scope.detes[i].key1==true){
$scope.detes[i].key1=false;
}else{
$scope.detes[i].key1=true;
}

}
}
$scope.dete=[];
$scope.dete=$scope.detes;
}







$scope.sql=0;
$scope.loi=0;
//批量删除
$scope.pidelet=function(sy){
//批量删除
$scope.sql=0;
$scope.sql=$scope.detes.length;
if(sy==1){
for(var j=0;j<=$scope.detes.length;j++) {
for (var i=0;i<$scope.detes.length;i++) {
if($scope.detes[i].key1==true){
$scope.detes.splice(i,1);
}
}
for (var i=0;i<$scope.detes.length;i++) {
if($scope.detes[i].key1==true){
$scope.detes.splice(i,1);
}
}
}

if($scope.sql==$scope.detes.length){
alert("请选中");
}

//批量发货
}else if(sy==2){
for(var j=0;j<=$scope.detes.length;j++) {
for (var i=0;i<$scope.detes.length;i++) {
if($scope.detes[i].key1==true){
$scope.detes[i].xon="已发货";
$scope.sql=$scope.sql-1;
$scope.loi=$scope.sql;
}else{
$scope.detes[i].xon="发货";
}
}
for (var i=0;i<$scope.detes.length;i++) {
if($scope.detes[i].key1==true){
$scope.detes[i].xon="已发货";

$scope.loi=$scope.loi-1;
$scope.sql=$scope.loi;
}else{
$scope.detes[i].xon="发货";
}
}
}


if($scope.sql==$scope.detes.length){
alert("请选中");
}
}
$scope.dete=[];
$scope.dete=$scope.detes;
}


$scope.xia=0;
$scope.dian=function(){
$scope.xia=1;
}
$scope.stun=[];
$scope.add=function(){
$scope.mi;



}

}]);
</script>


</head>
<body ng-app="myapp" ng-controller="tres">
<br />
<br />
<input type="text" ng-model="ming" placeholder="用户名搜索"/>
<input type="number" ng-model="hao" placeholder="手机号搜索"/>
<select ng-model="chengshi">
<option>选择城市</option>
<option>天津</option>
<option>呼和浩特</option>
<option>北京</option>
<option>安阳</option>
<option>南京</option>
<option>舟山</option>
</select>

<select ng-model="zhuang">
<option>选择状态</option>
<option>发货</option>
<option>已发货</option>
</select>

<select ng-model="yue">
<option>开始月份</option>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>5</option>
<option>6</option>
<option>7</option>
<option>8</option>
<option>9</option>
<option>10</option>
<option>11</option>
<option>12</option>
</select>

<select ng-model="jie">
<option>结束月份</option>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>5</option>
<option>6</option>
<option>7</option>
<option>8</option>
<option>9</option>
<option>10</option>
<option>11</option>
<option>12</option>
</select>

<button ng-click="chaxun()">查询</button>

<br />

<button ng-click="dian()">新增订单</button>
<button ng-click="pidelet(2)">批量发货</button>
<button ng-click="pidelet(1)">批量删除</button>

<br />
<table style="width: 800px;" cellpadding="0" cellspacing="0">
<thead>
<tr>
<th><input ng-click="xuan()"  type="checkbox"/></th>
<th ng-click="idpai()">ID</th>
<th ng-click="idpai1()">商品名</th>
<th ng-click="idpai2()">用户名</th>
<th ng-click="idpai3()">手机号</th>
<th ng-click="idpai4()">价格</th>
<th ng-click="idpai5()">城市</th>
<th ng-click="idpai6()">下单时间</th>
<th>状态</th>
<th>操作</th>

</tr>
</thead>
<tbody>

<tr ng-repeat=" na in dete">
<td><input name="ns" ng-click="pu(na)" type="checkbox"/></td>
<td>{{na.sid}}</td>
<td>{{na.spin|guolv}}</td>
<td>{{na.name}}</td>
<td>{{na.tel}}</td>
<td>{{na.pric|currency:"￥"}}</td>
<td>{{na.cid}}</td>
<td>{{na.time|date:"MM-dd HH:mm:ss"}}</td>
<th><span ng-hide="na.xon=='已发货'"><a ng-click="gaibian($index)" href="#">{{na.xon}}</a></span>
<span ng-hide="na.xon=='发货'" ng-click="gaibian($index)">{{na.xon}}</span>
</th>
<td><a href="#">修改</a><a ng-click="dele(na)" href="#">删除</a></td>
</tr>


</tbody>

</table>


<div ng-hide="xia!=1" style="width: 300px;">
商品名:<input type="text" ng-model="mi" /><br />
用     户:<input type="text" ng-model="yong" /><br />
手机号:<input type="text" ng-model="ha" /><br />
价      格:<input type="text" ng-model="jia" /><br />
城       市：<input type="text" ng-model="che" /><br />

<ul ng-hide="stun.length==0">
<li ng-repeat=" cu in cuo">{{cu}}</li>
</ul>

<button ng-click="add()">提交 </button>


</div>

</body>
</html>
流鑫星的光
关注
专栏目录
AngularJS实现购物车(二)
wq857260622的博客
11-14 285
案例：实现购物车复杂的功能 要求：技术要求（html+css+angularjs） 1.  完成页面布局，如图（button按钮可以用普通按钮）（页面布局合理、代码无误）。 2. 声明数据对象，初始化商品信息，数据自拟且不低于四条。 3.  用ng-repaet指令将对象遍历并渲染到页面中。 4. 点击”+”按钮输入框中的数量加1，同时可以计算
AngularJS 实现简单购物车
潇湘夜雨
10-16 1696
先看看界面：         我的购物车 //这里是自己的angular.js的路径                 * {             margin: 0;             padding: 0;         }         table {             border-collapse: col
AngularJs 购物车
weixin_43143580的博客
09-19 188
&lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /&gt; &lt;script src="js/angularjs1.4.js" type=&quo
angularJS购物车功能
Kobe Bryant
08-05 243
angularJS介绍 angularjs是由Google团队开发的一款非常优秀web前端框架。在当前如此多的web框架下，angularjs能脱颖而出，从架构设计上就高人一等，双向数据绑定，依赖注入，指令，MVC，模板。Angular.js创新地把后台技术融入前端开发，扫去jQuery一度的光芒。用angularjs就像写后台代码，更规范，更结构化，更可控。 一、趋势互联网未来的发展趋势是前端后...
angularjs 购物车
SuperZhongyulong的博客
03-27 222
&lt;!DOCTYPE html&gt;&lt;html&gt;    &lt;head&gt;        &lt;meta charset="utf-8" /&gt;        &lt;title&gt;&lt;/title&gt;        &lt;script type="text/javascript" src="js/angular
AngularJS购物车商品数量加减计算代码
01-03
通过以上技术，我们可以构建出一个功能完善的AngularJS购物车系统。用户可以方便地增加或减少商品数量，而总价会实时更新，提供良好的用户体验。当然，实际项目中还可能涉及到更多细节，如商品的加载、删除、库存...
AngularJS购物车商品数量加减计算特效代码
03-20
总结，这个AngularJS购物车代码实例展示了如何利用AngularJS的特性，如数据绑定、指令和控制器，来实现购物车商品数量的动态管理、总价计算以及商品的添加和移除。通过这种方式，我们可以创建一个响应迅速且易于维护...
AngularJS 购物车全选/取消全选功能的实现方法
10-19
在现代的Web应用开发中，AngularJS...以上即为AngularJS购物车全选与取消全选功能实现的详细知识点。掌握这些知识点，可以帮助开发者更有效地使用AngularJS框架来实现用户友好的交互功能，并针对常见问题提供优化方案。
angularshopcart:带有信用卡处理功能的 AngularJS 购物车
07-07
带有信用卡处理功能的 AngularJS 购物车 基于： : 上述项目是这个项目的基础。 它更深入地介绍了每个功能及其应用方式。 我的项目扩展有一些额外的功能和调整： 我没有为我们所有的路由器控制器和 JavaScript ...
AngularJS购物车商品数量加减计算代码.zip
05-27
标题“AngularJS购物车商品数量加减计算代码”表明我们将关注的是一个特定的AngularJS应用程序，该程序用于处理购物车中商品数量的增减操作，并可能包括总价计算和商品移除功能。这个项目基于AngularJS 1.2.32版本，...
Retrofit购物车
gongyaqi的博客
01-14 662
//工具类 import java.util.List; /**购物车 * Created by dell on 2018/1/8. */ public class MyDateGouWU { /** * msg : 请求成功 * code : 0 * data : [{"list":[{"bargainPrice":22.9,"cre
工具类
gongyaqi的博客
01-17 497
//bean包//购物车import java.util.List; /** * Created by dell on 2018/1/8. */ public class MyDateGouWU { /** * msg : 请求成功 * code : 0 * data : [{"list":[{"bargainPrice":22.9,"createt
购物车
gongyaqi的博客
01-17 281
//登陆//布局 android:layout_width="match_parent" android:background="#ffffff" android:layout_height="match_parent"> LinearLayout android:layout_width="match_parent" android:lay
网络[计][通信] network Http url网络解析
gongyaqi的博客
10-18 271
public static void newUrl(Context context, final String path, final JieKou fie){ if(WangLuo.isConn(context)){ Toast.makeText(context,"网络已连接",Toast.LENGTH_SHORT).show(); AsyncTask
封装retrofit+okhttp+rxjava
gongyaqi的博客
01-08 269
import android.os.Environment; import java.io.File; import java.io.IOException; import java.util.HashMap; import java.util.Map; import java.util.concurrent.TimeUnit; import okhttp3.Cache; import okh
使用PullToRefreshScrollView
gongyaqi的博客
10-20 265
//PullToRefreshScrollView布局文件 com.handmark.pulltorefresh.library.PullToRefreshScrollView xmlns:ptr="http://schemas.android.com/apk/res-auto" android:id="@+id/refresh_scroll_view" androi
angularjs查询删除 过滤敏感信息
gongyaqi的博客
11-23 237
thead tr{background:#424242;} tbody tr:nth-child(odd){background:#778899;} tbody tr:nth-child(even){background:#A4D3EE;} tbody tr:hover{background:#33FFFF ;} var app=angular.module("myapp",[
订单
gongyaqi的博客
01-19 231
订单布局LinearLayout android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical"> LinearLayout android:layout_width="match_parent" android:l
AngularJS购物车实现教程
"这篇PPT主要讲解如何使用AngularJS实现一个购物车功能，适合初学者入门。内容包括使用AngularJS的ngRepeat指令来渲染商品列表，实现添加和移除购物车，修改商品数量以及实时计算总价。此外，还对比了传统以jQuery为...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值