首页 > 代码库 > angular 的 商品收藏（购物车）
angular 的 商品收藏（购物车）
在下才疏学浅，不足之处，还请多多指教。
大部分电商网站都会有商品收藏，购物车，我整理了一个小案例：
<!DOCTYPE html><html lang="en" ng-app="indexApp"><head> <meta charset="UTF-8"> <title>Title</title> <style> *{ padding: 0; margin: 0; } .box{ width:1200px; margin: 200px auto; } .header{ margin-bottom: 20px; } li{ list-style: none; float: left; width:200px; margin-left: 20px; border: 1px solid #cccccc; position: relative; padding-top: 20px; } li:hover{ border: 1px solid #666666; } .li-input{ position: absolute; left: 10px; top:10px; } img{ width: 158px; height: 200px; margin: 0 auto; display: block; } p{ line-height: 30px; } </style> <script src="http://www.mamicode.com/js/angular.js"></script></head><body ng-controller="indexCtrl"> <div class="box"> <div class="header"> <input type="checkbox" ng-model="allSelect" ng-change="checkS()"> 全选 <label ng-click="showS()">显示勾选</label> </div> <ul> <li ng-repeat="item in vm"> <input type="checkbox" class="li-input" ng-model="item.select" ng-change="checkS(item.itemId)" > <img src="http://www.mamicode.com/clc-bg.png" > <p>{{item.name}}</p> <p>{{item.price}}</p> </li> </ul> </div><script> angular.module(‘indexApp‘,[]) .controller(‘indexCtrl‘,function($scope){ $scope.allSelect = false; $scope.itenId1 = 66; $scope.itenId2 = 88; $scope.itenId3 = 99; $scope.vm =[ { itemId:66, price:‘￥66‘, name:‘这是商品名字‘ }, { itemId:88, price:‘￥88‘, name:‘这是商品名字‘ }, { itemId:99, price:‘￥99‘, name:‘这是商品名字‘ } ]; $scope.checkS = function(itemId){ var items = []; if(itemId){ angular.forEach($scope.vm,function(i,j){ if(i.select ==true){ items.push(i.itemId) } }); if(items.length ==$scope.vm.length){ $scope.allSelect = true; }else{ $scope.allSelect = false; } }else{ $scope.vm.forEach(function(i,j){ i.select = $scope.allSelect ; }) } }; $scope.showS = function(){ var items = []; angular.forEach($scope.vm,function(i,j){ if(i.select ==true){ items.push(i.itemId); } }); if(items.length==0){ alert(‘没有选择商品‘); }else{ function init(id){ alert(id); if(items.length>1){ items.shift(); init(items[0]); } }; init(items[0]); } } })</script></body></html>
执行效果如下：
页面很简陋，但足以说明问题。
angular 的 商品收藏（购物车）
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。