<!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. hdu 5176 The Experience of Love

    The Experience of Love  Accepts: 11  Submissions: 108  Time Limit: 4000/2000 MS (Java/Others)  Memor ...

  2. net core 配置Redis Cache

    参考文章地址:https://dotnetcoretutorials.com/2017/01/06/using-redis-cache-net-core/ 具体步骤: 1   Install-Pack ...

  3. java 常见问题

    1.Cannot convert value '0000-00-00 00:00:00' from column 1 to TIMESTAMP 2.怎么解决BigDecimal里面无限循环小数的问题啊 ...

  4. GlobalSign 增强型(EV) SSL 证书

    GlobalSign 增强型(EV) SSL 证书,属于最高验证级别的EV SSL,验证域名所有权,进行严格的企业真实身份验证,证书标识企业组织机构名称,强化信任度,浏览器地址栏变绿色.提供40位/5 ...

  5. nyoj 310二分+dinic

    #include<stdio.h> #include<queue> #include<string.h> using namespace std; #define ...

  6. Linux 下rm+grep删除除去指定文件的剩余所有文件

    例如:  删除当前文件夹下    .c和 .h    文件以外的文件 rm -f   `ls ./ | egrep -v "(.c$|.h$)"` 1. ls 列出所有文件; 2. ...

  7. java中String类型转换为float类型

    import java.io.*; public class Demo1{ public static void main(String args[]) { String df="12.2& ...

  8. 洛谷 P2915 [USACO08NOV]奶牛混合起来Mixed Up Cows

    P2915 [USACO08NOV]奶牛混合起来Mixed Up Cows 题目描述 Each of Farmer John's N (4 <= N <= 16) cows has a u ...

  9. Findbug插件静态java代码扫描工具使用

    本文转自http://blog.csdn.net/gaofuqi/article/details/22679609 感谢作者 FindBugs 是由马里兰大学提供的一款开源 Java静态代码分析工具. ...

  10. 【Todo】Java TreeSet学习 & ceiling，floor

    参考 http://www.yiibai.com/java/util/java_util_treeset.html 另,用Java的TreeSet的ceiling可以模拟upper_bound(获得更 ...