집 > 기사 > 웹 프론트엔드 > Angularjs와 부트스트랩을 사용하여 장바구니 기능 구현

Angularjs와 부트스트랩을 사용하여 장바구니 기능 구현

高洛峰원래의: 2017-02-04 13:35:111211검색

1. 코드

이 효과를 보고 싶고 만드는 방법을 알고 싶다면 계속해서 읽어보세요. 말할 것도 없고 바로 코드로 넘어가세요.

html 코드:

<!DOCTYPE html>
<html ng-app="cart">
<head>
 <meta charset="UTF-8">
 <title>购物车</title>
 <link rel="stylesheet" href="../scripts/angular-1.4.0-rc.2/docs/components/bootstrap-3.1.1/css/bootstrap.min.css">
 <link rel="stylesheet" href="main.css">
</head>
<body ng-controller="cartCtr">
<table class="table table-hover" ng-show="items.length">
 <caption>AngularJS实现购物车</caption>
 <tr>
 <th>序号</th>
 <th>商品信息</th>
 <th>单价（元）</th>
 <th>数量</th>
 <th>金额（元）</th>
 <th>操作</th>
 </tr>
 <tr ng-repeat=" item in items">
 <td>{{$index + 1}}</td>
 <td><a href="{{item.linkUrl}}" target="_blank" title="此链接将跳转到淘宝相关页面...">{{item.title}}</a></td>
 <td>{{item.price|number:2}}</td>
 <td>
  <button type="button" class="btn btn-default btn-xs" ng-click="reduce(item.id)" ng-disabled="item.quantity<=1">－</button>
  <input type="text" size="5" ng-model="item.quantity" ng-keydown="quantityKeydown()" ng-keyup="quantityKeyup()">
  <button type="button" class="btn btn-default btn-xs" ng-click="add(item.id)">＋</button>
 </td>
 <td class="bold mark">{{item.price*item.quantity|number:2}}</td>
 <td>
  <button type="button" class="btn btn-default btn-xs" ng-click="delete(item.id)">删除</button>
 </td>
 </tr>
</table>
<div ng-show="!items.length">购物车空空，快去寻找宝贝</div>
<div>
 已选商品：<span>{{getQuantites()}} </span>
 合计：
 <span class=" mark" ng-show="getTotalAmount()<15000">{{getTotalAmount()|number:2}}</span>
 <span class=" mark" ng-show="getTotalAmount()>=15000">
 {{getTotalAmount()*discount|number:2}}<span class="btn btn-xs">(9折)</span>
 <span>({{getTotalAmount()|number:2}})</span>
 </span>
 <button type="button" class="btn btn-primary btn-sm" ng-click="alertSubmit()">结 算</button>
</div>
<script src="../scripts/angular-1.4.0-rc.2/angular.js"></script><script src="app.js"></script>
</body>
</html>

js 코드:

/ Created by wqq on 2016/5/25. /
var cartModule = angular.module(&#39;cart&#39;, []);
cartModule.controller(&#39;cartCtr&#39;, [&#39;$scope&#39;, function ($scope) {
 $scope.discount = 0.9;
 $scope.items = [{id: 10001,title: "Web全栈工程师的自我修养 余果", price: 40.80,quantity: 2,linkUrl: "https://detail.tmall.com/item.htm?spm=a1z0d.6639537.1997196601.4.cwywJs&id=532166746631"},
     {id: 10002,title: "MacBook Pro Retina 15英寸", price: 16088.00,quantity: 1,linkUrl: "https://detail.tmall.com/item.htm?spm=a1z0d.6639537.1997196601.26.cwywJs&id=45771116847"},
     {id: 10003,title: "Surface Book I5 128G 独显",price: 11088.00, quantity: 1,linkUrl: "https://detail.tmall.com/item.htm?spm=a1z0d.6639537.1997196601.15.cwywJs&id=525614504276"},
     {id: 10004, title: "Lenovo Yoga3Pro I5 4G",price: 7299.00, quantity: 1,linkUrl: "https://detail.tmall.com/item.htm?spm=a1z0d.6639537.1997196601.37.cwywJs&id=41541519814"} ];
 $scope.add = function (id) {
  angular.forEach($scope.items, function (item, index, array) {
        if (item.id === id) {item.quantity++;} })
 };
 $scope.reduce = function (id) {
  angular.forEach($scope.items, function (item, index, array) {
        if (item.id === id) {item.quantity--; } })
 };
 //输入框添加keydown事件，避免输入非正整数
 $scope.quantityKeydown = function (event) {
  event = event || window.event;
  var target=event.target||event.srcElement;
  var keycode = event.keyCode;
  if ((37 <= keycode && keycode <= 40)||(48 <= keycode && keycode <= 57) || (96 <= keycode && keycode <= 105) || keycode == 8) {
    //方向键↑→ ↓←、数字键、backspace
  }
  else {
   console.log(keycode);
   event.preventDefault();
   return false;
  }
 };
//keyup事件，当输入数字为0时，重新刷新文本框内容
$scope.quantityKeyup = function (event) {
  event = event || window.event;
  var target=event.target||event.srcElement;
  var keycode = event.keyCode;
  if (48 === keycode || 96 === keycode ) {
   target.value=parseInt(target.value);
 }};
 //删除商品
 $scope.delete = function (id) {
  $scope.items.forEach(function (item, index) {
  if (item.id == id) {
   if (confirm("确定要从购物车中删除此商品？")) {
    $scope.items.splice(index, 1);
    return;
   }
  }
 })
 };
 //计算已选商品数量
 $scope.getQuantites = function () {
 var quantities = 0;
 angular.forEach($scope.items, function (item, index, array) {
  if (item.quantity) {
   quantities += parseInt(item.quantity);
  }
 });
 return quantities;
 };
 //计算合计总金额
 $scope.getTotalAmount = function () {
 var totalAmount = 0;
 angular.forEach($scope.items, function (item, index, array) {
  totalAmount += item.quantity * item.price;  });
 return totalAmount;
 };
 $scope.alertSubmit = function () {alert("Angular实现购物车"); }
}]);

2. 분석

부트스트랩 스타일은 무시하세요. 우리는 Angular에만 집중합니다. code 매우 간단합니다. 간략한 분석을 해보겠습니다.

1. 준비

먼저 장바구니 모듈과 cartCtr 컨트롤러를 정의하고 동시에 html 코드에 도입합니다. 이번에는 장바구니의 내용을 시뮬레이션하기 위해 js에 배열 항목을 정의했습니다.

2.ng-repeat 반복자

항목의 데이터를 동적으로 로드하기 위해 Angular에 내장된 명령어 ng-repeat를 사용하는데, 이는 Traverse에서 매우 편리합니다. 여기서 루프는 4개의

태그를 생성합니다.

<tr ng-repeat=" item in items">

item은 항목 배열의 객체입니다. 이것이 js의 for/in 루프처럼 느껴지지 않나요? ~ ~당신이 .net 개발자이고 asp.net mvc의 Razor를 사용해 본 적이 있다면 다른 언어에서 DOM 요소의 원활한 작동에 익숙할 것입니다. Java와 PHP가 비슷한 구문을 가지고 있는지는 잘 모르겠습니다. 저는 열심히 일하는 .net 개발자입니다.

Angularjs와 부트스트랩을 사용하여 장바구니 기능 구현

ng-repeat iterator

우리가 정의한 것은 ng-repeat 내의 첫 번째 td에 $index가 사용된 것을 볼 수 있습니다. 해당 값은 0부터 시작하는 항목의 현재 항목 인덱스이므로 $index+1을 일련 번호로 사용하고 다른 항목(item.linkUrl과 유사) 데이터 바인딩도 있습니다.

단가 및 금액 열에 {{ xxx|number:2}}를 사용했습니다. 이는 Angular의 필터로 이전 값 xxx를 소수점 이하 두 자리까지 유지하는 것입니다. 물론 금액에 대해서는 좀 더 정확해야 합니다. 방금 이것이 일종의 필터라고 언급했지만 통화와 같은 다른 필터도 있습니다. xxx 앞에 $ 기호를 추가하여 미국 달러를 표시할 수 있습니다.

3. 이벤트 추가

현재 인터페이스에는 수량 +, - 버튼 및 삭제 버튼이 있습니다. 이러한 이벤트는 클릭 이벤트를 추가하는 데 비교적 간단합니다. 요소. 상품의 ID를 전달하면 해당 상품을 찾아 추가, 빼기, 삭제가 가능합니다. 그런데 이름을 보면 '-' 버튼에 ng-disabled 태그가 추가되어 있어서 쉽게 html을 떠올릴 수 있습니다. .disabled 속성은 ng-disabled 값이 true일 때 DOM 요소를 비활성화하는 것입니다. 마찬가지로 아래에 사용된 ng-show도 true일 때 표시되고 false일 때 숨겨집니다. 숫자인 경우 자동으로 부울 값으로 변환됩니다. 0은 false이고, 0이 아닌 경우는 true이며, 음수도 true입니다. . 여기서는 아무리 작은 숫자라도 직접 삭제할 수 있기 때문에 1이 되면 줄이는 것을 불가능하게 만듭니다~

그런 다음 입력 요소에 ng-keydown 이벤트를 추가하여 방향키 ↑ → ↓←, 숫자키, 백스페이스만 입력 가능합니다. 그러다가 시도해 보았는데 목표를 달성했지만 "00021"과 같은 숫자를 입력할 수 있었는데 이는 분명 만족스럽지 못했습니다. 타오바오 장바구니를 보니 앞에 0이 입력되면 이 텍스트 상자의 내용이 자동으로 새로 고쳐지고 앞의 0이 제거되는 것을 발견하여 ng-keyup 이벤트를 추가했습니다:

$scope.quantityKeyup = function (event) {
  event = event || window.event; //兼容IE8以下，target也是
  var target=event.target||event.srcElement;
  var keycode = event.keyCode;
  if (48 === keycode || 96 === keycode ) {
   target.value=parseInt(target.value);
 }};

0을 입력하면 텍스트 상자 값이 자동으로 새로 고쳐집니다. keydown에 추가하고 다른 이벤트를 추가하는 것은 어떨까요? 이는 keydown 이벤트가 트리거될 때 target.value의 값이 여전히 원래 값이고, 이번에는 키 입력을 포함하지 않기 때문입니다. 이때 keydown 이후에는 해당 값이 새 값이 됩니다. 목표를 달성하기 위한 키업 이벤트. 타오바오 장바구니의 효과를 비교할 수 있습니다. 끝에 숫자를 입력하지 않는 한 텍스트 상자는 항상 초점을 잃기 때문에 내 경험이 더 낫다고 생각합니다. . .

4. 통계

통계량은 배열을 순회하여 값을 반환하는 직접 바인딩 방식입니다.

총액 기준으로 15,000개 이상 구매시 10% 할인이 되는 디자인을 만들어 봤습니다. 할인 정보와 함께 총액을 숨기고 표시하려면 ng-show를 사용하세요.

3. 요약

JS는 여러 forEach를 사용하여 배열을 탐색합니다. ECMAScript5의 기본 메서드는 array.forEach(function(item,index,array){})입니다. >

또한angular,angular.forEach(array,function(item,index,array){});

코드에서 두 가지 방법을 모두 사용합니다. 도착하면 어떤 성능이 좋은지 모르겠습니다. .

이 시점에서 장바구니가 완성됩니다. Angular의 양방향 바인딩을 사용하면 수량 및 금액의 연동 변경을 빠르게 구현할 수 있습니다. 이 기사의 내용이 Angular를 배우고 사용하는 모든 사람에게 도움이 되기를 바랍니다. 궁금한 점이 있으면 메시지를 남겨서 소통하세요.

Angularjs와 부트스트랩을 사용해 장바구니 기능을 구현한 관련 기사를 더 보려면 PHP 중국어 웹사이트를 주목하세요!

성명：

이전 기사：JavaScript로 간단한 장바구니 기능 작성다음 기사：JavaScript로 간단한 장바구니 기능 작성