<!DOCTYPE html>
  <html lang="en">
  <head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script src="../angular-1.5.5/angular.min.js"></script>
  <script>
  var myapp=angular.module("myapp",[]);
  myapp.controller("myCtrl",function($scope){
  $scope.data = {
  categories: [{check: false, category: "商品01"},
  {check: false, category: "商品02"},
  {check: false, category: "商品03"},
  {check: false, category: "商品04"}],
  //商品明细
  products: [
  {category: "商品01", name: "鼠标", desc: "2016春季爆款", price: "101", imgsrc: "images/TB1_50x50.jpg"},
  {category: "商品01", name: "键盘", desc: "2016夏季爆款", price: "601", imgsrc: "images/TB2_50x50.jpg"},
  {category: "商品01", name: "主机", desc: "2016秋季爆款", price: "3001", imgsrc: "images/TB3_50x50.jpg"},
  {category: "商品01", name: "显示器", desc: "2016冬季爆款", price: "1001", imgsrc: "images/TB3_50x50.jpg"},
  {category: "商品01", name: "鼠标", desc: "2016春季爆款", price: "101", imgsrc: "images/TB1_50x50.jpg"},
  {category: "商品01", name: "键盘", desc: "2016夏季爆款", price: "601", imgsrc: "images/TB2_50x50.jpg"},
  {category: "商品01", name: "主机", desc: "2016秋季爆款", price: "3001", imgsrc: "images/TB3_50x50.jpg"},
  {category: "商品01", name: "显示器", desc: "2016冬季爆款", price: "1001", imgsrc: "images/TB3_50x50.jpg"},
  {category: "商品02", name: "鼠标", desc: "2015春季爆款", price: "101", imgsrc: "images/TB1_50x50.jpg"},
  {category: "商品02", name: "键盘", desc: "2015夏季爆款", price: "601", imgsrc: "images/TB2_50x50.jpg"},
  {category: "商品02", name: "主机", desc: "2015秋季爆款", price: "3001", imgsrc: "images/TB3_50x50.jpg"},
  {category: "商品02", name: "显示器", desc: "2015冬季爆款", price: "1001", imgsrc: "images/TB3_50x50.jpg"},
  {category: "商品03", name: "鼠标", desc: "2014春季爆款", price: "101", imgsrc: "images/TB1_50x50.jpg"},
  {category: "商品03", name: "键盘", desc: "2014夏季爆款", price: "601", imgsrc: "images/TB2_50x50.jpg"},
  {category: "商品03", name: "主机", desc: "2014秋季爆款", price: "3001", imgsrc: "images/TB3_50x50.jpg"},
  {category: "商品03", name: "显示器", desc: "2014冬季爆款", price: "1001", imgsrc: "images/TB3_50x50.jpg"},
  {category: "商品04", name: "鼠标", desc: "2013春季爆款", price: "101", imgsrc: "images/TB1_50x50.jpg"},
  {category: "商品04", name: "键盘", desc: "2013夏季爆款", price: "601", imgsrc: "images/TB2_50x50.jpg"},
  {category: "商品04", name: "主机", desc: "2013秋季爆款", price: "3001", imgsrc: "images/TB3_50x50.jpg"},
  {category: "商品04", name: "显示器", desc: "2013冬季爆款", price: "1001", imgsrc: "images/TB3_50x50.jpg"}
  ]
  };
  //获取选取的内容
   
  $scope.fun=function(){
  var n=0;
  var j=0;
  for(var i=0;i<$scope.data.categories.length;i++){
  if($scope.data.categories[i].check==true){
  n++;
  j=i;
  }
  }
  console.log(n);
  if(n==0){
  alert("啥都没选");
  }else if(n>=2){
  alert("选多了");
  }else if(n==1){
  alert($scope.data.categories[j].category);
  $scope.sel=$scope.data.categories[j].category;
  }
  };
   
  //过滤商品
  /* $scope.catFilter=function(item){
  //console.log(item);
  if($scope.sel==item.category||$scope.sel==null){
  return true;
  }else{
  return false;
  }
  };*/
  //添加购物车
  $scope.cart=[];
  $scope.add=function(item){
  //console.log(item);
  var has=false;
  for(var i=0;i<$scope.cart.length;i++){
  if(item.name==$scope.cart[i].item.name){
  console.log(1);
  has=true;
  $scope.cart[i].num++;
  break;
  }else{
  console.log(0);
  has=false;
  }
  };
  if(has==false){
  $scope.cart.push({item:item,num:1});
  }
  }
  });
  </script>
  </head>
  <body ng-app="myapp" ng-controller="myCtrl">
  <ul>
  <li ng-repeat="item in data.categories">
  <input type="checkbox" ng-model="item.check">
  {{item.category}}
  </li>
  </ul>
  <button ng-click="fun()">选取对应商品</button>
  <table>
  <thead>
  <tr>
  <td>商品类别</td>
  <td>商品名称</td>
  <td>商品价格</td>
  <td>添加购物车</td>
  </tr>
  </thead>
  <tbody>
  <tr ng-repeat="item in data.products|filter:sel">
  <td>{{item.category}}</td>
  <td>{{item.name}}</td>
  <td>{{item.price}}</td>
  <td><button ng-click="add(item)">添加购物</button></td>
  </tr>
  </tbody>
  </table>
  <h2>购物车</h2>
  <table>
  <thead>
  <tr>
  <th>产品</th>
  <th>数量</th>
  <th>价格</th>
  <th>小计</th>
  </tr>
  </thead>
  <tbody>
  <tr ng-repeat="item in cart">
  <td>{{item.item.name}}</td>
  <td>{{item.num}}</td>
  <td>{{item.item.price}}</td>
  <td>{{item.item.price*item.num}}</td>
  </tr>
  </tbody>
  </table>
  </body>
  </html>

angular js shopping的更多相关文章

  1. MVC、MVP、MVVM、Angular.js、Knockout.js、Backbone.js、React.js、Ember.js、Avalon.js、Vue.js 概念摘录

    注:文章内容都是摘录性文字,自己阅读的一些笔记,方便日后查看. MVC MVC(Model-View-Controller),M 是指业务模型,V 是指用户界面,C 则是控制器,使用 MVC 的目的是 ...

  2. angular.js:13920 Error: [$injector:unpr] Unknown provider: $scopeProvider <- $scope <- testServe

    angular.js:13920 Error: [$injector:unpr] Unknown provider: $scopeProvider <- $scope <- testSer ...

  3. (翻译)Angular.js为什么如此火呢？

    在本文中让我们来逐步发掘angular为什么如此火: Angular.js 是一个MV*(Model-View-Whatever,不管是MVC或者MVVM,统归MDV(model Drive View ...

  4. angular.js写法不规范导致错误

    以下写法:没有明确指定module和controller,写法不规范. 更改angular.js版本会出bug. <html ng-app> <head> <title& ...

  5. Angular.js实现折叠按钮的经典指令.

    var expanderModule=angular.module('expanderModule',[]) expanderModule.directive('expander',function( ...

  6. Angular.js通过bootstrap实现经典的表单提交

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <link rel= ...

  7. python , angular js 学习记录【1】

    1.日期格式化 Letter Date or Time Component Presentation Examples G Era designator Text AD y Year Year 199 ...

  8. Angular JS 学习之路由

    1.AngularJS路由允许我们通过不同的URL访问不同的内容:通过AngularJS可以实现多视图的单页WEB访问(SPA) 2.通常我们的URL形式为http://runoob.com/firs ...

  9. Angular JS 学习之Bootstrap

    1.要使用Bootstrap框架,必须在<head>中加入链接: <link rel="stylesheet" href="//maxcdn.boots ...

随机推荐

  1. JS练习：两级联动

    代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title ...

  2. Swoole 源码分析——Server模块之Worker事件循环

    swManager_loop 函数 manager 进程管理 manager 进程开启的时候,首先要调用 onManagerStart 回调 添加信号处理函数 swSignal_add,SIGTERM ...

  3. hdu 4941 stl的map<node,int>用法

    #include<iostream> #include<cstdio> #include<cstring> #include<map> using na ...

  4. [Cogs727] [网络流24题#2] 太空飞行计划 [网络流，最小割]

    建图:源点—(w[i])—>实验—(∞)—>仪器—(cost[i])—>汇点, 如果该实验造成收益,则仪器到汇点的边在最小割中, 如果该实验造成损失,则源点到实验的边在最小割中, 故 ...

  5. 【ACM】hdu_1089_A+BI_201307261121

    A+B for Input-Output Practice (I)Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 ...

  6. 让我们加密吧Let's encrypt

    前言 如今的互联网越来越不安全,我们每个人的信息以及隐私不断被暴露,地下黑产盛行,经常收到垃圾短信,经常被陌生人的电话骚扰.我们的个人信息是怎么泄漏的呢?各种爬虫无时无刻不在互联网爬取着信息,各种嗅探 ...

  7. Android: Could not find com.android.support:support-v4:21.0.0

    安装Android Support Repository即可解决这个问题.

  8. iOS：去除UITableView的空白行

    要去除UITableView在运行时显示的多余空白行,只需要将TableView的Style从Plain改为Grouped即可.

  9. 中国银联mPOS通用技术安全分析和规范解读

    mPOS是近年出现并得到迅速发展的一种新型受理产品,不少机构和生产企业进行了各种形式的试点. 因为mPOS引入了手机.平板电脑等通用智能移动设备.并通过互联网进行信息传输.因此其安全特点与传统银行卡受 ...

  10. MySql解压版使用

    1.解压 2.配置环境变量 3.新建空目录data,修改ini配置文件,修改basedir和datadir 4.管理员运行cmd,进入bin目录 5.mysql -install,如果提示错误,先my ...