<!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. 五、Scrapy中Item Pipeline的用法

    本文转载自以下链接: https://scrapy-chs.readthedocs.io/zh_CN/latest/topics/item-pipeline.html https://doc.scra ...

  2. 使用Autofac 依赖注入及 swagger 之startup配置

    言语有限,代码如下: public IServiceProvider ConfigureServices(IServiceCollection services) { services .AddCor ...

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

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

  4. 使用applescript脚本方式以管理员权限运行

    - (BOOL) runProcessAsAdministrator:(NSString*)scriptPath                      withArguments:(NSArray ...

  5. hdu_1232_畅通工程_201403091018

    畅通工程 Time Limit: 4000/2000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)Total Submis ...

  6. [bzoj3061][Usaco13Feb]Partitioning the Farm_动态规划_状压dp

    Partitioning the Farm bzoj-3061 Usaco13Feb 题目大意:给定一个n*n的方格图,用k条贯穿方格图的直线将整个方格图分割,使得每一块的权值和的最大值最小. 注释: ...

  7. Linux轻松一下——cowsay命令，让动物说话

    Linux动物说话命令 使用方法 安装命令:sudo apt-get install cowsay 使用命令:cowsay hello 查看可选动物 cowsay -l 使用其他动物 cowsay - ...

  8. SSM(spring mvc+spring+mybatis)学习路径——2-1、spring MVC入门

    目录 2-1 Spring MVC起步 一.回顾Servlet 二.SpringMVC简介 三.搭建SpringMVC第一个案例 四.简单流程及配置 五.使用注解开发Controller 六.参数绑定 ...

  9. MySQL系列：innodb源码分析 图 ---zerok的专栏

    http://blog.csdn.net/yuanrxdu/article/details/40985363

  10. CSS Display属性与盒模型

    由于HTML流式文档的特性,页面布局往往是新手最为头疼的问题之中的一个. 每一个HTML元素都会渲染为一个Box,可分为inline Box和block Box. 依据display属性的不同.Box ...