<!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. 学习MPI并行编程记录

    简单的MPI程序示例 首先,我们来看一个简单的MPI程序实例.如同我们学习各种语言的第一个程序一样,对于MPI的第一个程序同样是"Hello Word". /* Case 1 he ...

  2. LINUX 查看硬件配置命令

      系统 # uname -a # 查看内核/操作系统/CPU信息 # head -n 1 /etc/issue # 查看操作系统版本 # cat /proc/cpuinfo # 查看CPU信息 # ...

  3. Python之路【第一篇】：Python基础1

    本节内容 Python介绍 发展史 Python 2 or 3? 安装 Hello World程序 变量 用户输入 模块初识 .pyc是个什么鬼? 数据类型初识 数据运算 表达式if ...else语 ...

  4. 计算机与linux操作系统的发展

    一.计算机 (一)计算机的概念 1.概念:计算机(computer)俗称电脑,是一种用于高速计算的电子计算机器,可以进行数值计算,又可以进行逻辑计算,还具有存储记忆功能.是能够按照程序运行,自动.高速 ...

  5. x$bh视图

    首先,这篇文章是基于如下ORACLE版本. BANNER ------------------------------------------------ Oracle Database 10g En ...

  6. PHP array_diff_uassoc()

    定义和用法 array_diff_uassoc() 函数使用用户自定义的回调函数 (callback) 做索引检查来计算两个或多个数组的差集.返回一个数组,该数组包括了在 array1 中但是不在任何 ...

  7. BPMN使用工具

    EA  非常多设计人员都在使用EA.他不仅支持UML,相同也全然支持BPMN2.0.<BPMN规范中的三种视图 >展示的BPMN中三种视图就是使用此工具所绘制. activitidesig ...

  8. &quot;Hello World &quot; —— 深入理解程序从编译到执行

    对于C语言编写的Hello World程序(例如以下).对于程序猿来说肯定如雷贯耳,就是这样一个简单的程序,你真的了解她吗? #include <stdio.h> int main() { ...

  9. Nginx1.6 for centos6.5安装

    Nginx 学习文档:http://www.cnblogs.com/zhoulf/archive/2013/02/09/2909653.html 下载地址:http://nginx.org/en/do ...

  10. tflearn中计算混淆矩阵方法——需要经过一步转换

    def do_rnn_wordbag(trainX, testX, trainY, testY): y_test=testY #trainX = pad_sequences(trainX, maxle ...