<!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. [如何在mac下使用gulp] 2. gulp模块的常用方法

    常用的gulp模块方法有: gulp.src() gulp.src('client/one.js'); //指定明确的要处理文件 gulp.src('client/*.js'); //处理client ...

  2. SprinMVC接收参数乱码解决篇

    1.Spring 默认的字符编码格式为iso-8859-1,为此Spring专门提供了字符过滤器org.springframework.web.filter.CharacterEncodingFilt ...

  3. GeoTrust 企业(OV)型 增强版(EV) 多域名(SAN/UC) SSL证书

    GeoTrust 企业(OV)型 增强版(EV) 多域名(SAN/UC)SSL证书(GeoTrust True BusinessID With EV Multi-Domain(SAN/UC) SSL ...

  4. bupt summer training for 16 #6 ——图论

    https://vjudge.net/contest/174020 A.100条双向边,每个点最少连2个边 所以最多100个点,点的标号需要离散化 然后要求恰好经过n条路径 快速幂,乘法过程就是flo ...

  5. Divisible Group Sums

    Divisible Group Sums Given a list of N numbers you will be allowed to choose any M of them. So you c ...

  6. fzu 2125

    #include<stdio.h> #include<math.h> int total(int x,int m) { int sum=0; while(x>0) {   ...

  7. mysql :=和=的区别

    :=和=的区别 = 只有在set和update时才是和:=一样,赋值的作用,其它都是等于的作用.鉴于此,用变量实现行号时,必须用:= := 不只在set和update时时赋值的作用,在select也是 ...

  8. JavaScript中的call（）和apply（）方法，借此实现继承

    1.方法定义 call方法: 语法:call([thisObj[,arg1[, arg2[,   [,.argN]]]]]) 定义:调用一个对象的一个方法,以另一个对象替换当前对象. 说明: call ...

  9. nyoj_38_布线问题_201403121753

    布线问题 时间限制:1000 ms  |  内存限制:65535 KB 难度:4   描述 南阳理工学院要进行用电线路改造,现在校长要求设计师设计出一种布线方式,该布线方式需要满足以下条件:1.把所有 ...

  10. sql server 学习课件 PPT

    http://www.cnblogs.com/woodytu/p/4465288.html