Angular를 사용하여 기본 장바구니 기능을 구현하는 방법-JS 튜토리얼-php.cn

집

웹 프론트엔드

JS 튜토리얼

Angular를 사용하여 기본 장바구니 기능을 구현하는 방법

亚连

Jun 15, 2018 pm 02:44 PM

angular 삭제 믿다 장바구니

이 글에서는 주로 AngularJS 이벤트 응답, 요소 순회 및 수치 연산 및 기타 관련 연산 기술을 포함하여 삭제하고 총 금액을 계산할 수 있는 장바구니 기능의 구현을 소개합니다.

예시 이 글에서는 Angular의 장바구니 기능을 구현하여 총 금액을 삭제하고 계산하는 방법을 설명합니다. 참고용으로 모두와 공유하세요. 자세한 내용은 다음과 같습니다.

실행 효과를 먼저 살펴보겠습니다.

구체적인 코드는 다음과 같습니다.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>www.jb51.net angular可删除与计算总额的购物车</title>
  <script src="angular.min.js"></script>
  <style>
    table{
      width: 500px;
      height: 300px;
      border-collapse: collapse;
      text-align: center;
    }
    td{
      border: 1px solid black;
    }
  </style>
  <script>
    var myapp=angular.module("myapp",[]);
    myapp.controller("myCtrl",function ($scope) {
      $scope.goods=[{
        gname:"iphone8",
        num:"3",
        price:"999"
      },{
        gname: "iphone7",
        num: "4",
        price: "599"
      },{
        gname: "iphone6",
        num: "5",
        price: "499"
      },{
        gname: "iphone5",
        num: "6",
        price: "399"
      }
      ];
      $scope.allSum=function () {
        var allPrice=0;
        for(var i=0;i<$scope.goods.length;i++){
          allPrice+=$scope.goods[i].price*$scope.goods[i].num;
        }
        return allPrice;
      };
      $scope.remove=function (index) {
        if(confirm(&#39;确定移除此项嘛？&#39;)){
          $scope.goods.splice(index,1);
        }
        if($scope.goods.length==0){
          alter(&#39;你的购物车为空&#39;);
        }
      };
    })
  </script>
</head>
<body ng-app="myapp" ng-controller="myCtrl">
<table>
  <tr>
    <td colspan="5">你的购物车</td>
    <tr>
  <td>商品名称</td>
  <td>数量</td>
  <td>单价</td>
  <td>小计</td>
  <td>操作</td>
  </tr>
  <tr ng-repeat="arr in goods">
    <td>{{arr.gname}}</td>
    <td>{{arr.num}}</td>
    <td>{{arr.price|currency:"RMB￥"}}</td>
    <td>{{arr.num*arr.price|currency:"RMB￥"}}</td>
    <td><button ng-click="remove($index)">删除</button></td>
  </tr>
  <tr>
    <td colspan="5">总金额<span ng-bind="allSum()|currency:&#39;RMB&#39;"></span></td>
  </tr>
</table>
</body>
</html>

로그인 후 복사

위는 다음과 같습니다. 제가 모두를 위해 정리한 내용이 앞으로 모든 사람에게 도움이 되기를 바랍니다.

핫 AI 도구

Video Face Swap

완전히 무료인 AI 얼굴 교환 도구를 사용하여 모든 비디오의 얼굴을 쉽게 바꾸세요!

뜨거운 도구

뜨거운 주제

Gmail 이메일의 로그인 입구는 어디에 있나요?

7695

자바 튜토리얼

1640

Cakephp 튜토리얼

1393

라라벨 튜토리얼

1287

PHP 튜토리얼

1229

Related knowledge

Xiaohongshu 메모를 삭제하는 방법 Mar 21, 2024 pm 08:12 PM

Xiaohongshu 메모를 삭제하는 방법 Xiaohongshu 앱에서 메모를 편집할 수 있습니다. 다음으로 편집기는 Xiaohongshu 메모 삭제 방법에 대한 사용자 사진과 텍스트를 가져옵니다. 보세요! Xiaohongshu 사용 튜토리얼 Xiaohongshu 메모 삭제 방법 1. 먼저 Xiaohongshu 앱을 열고 메인 페이지로 들어가서 오른쪽 하단에 있는 [Me]를 선택하여 특별 영역으로 들어갑니다. 2. 그런 다음 내 영역에서 다음과 같이 메모 페이지를 클릭합니다. 3. 노트 페이지에 들어가서 오른쪽 상단에 있는 [점 3개]를 클릭합니다. 4. 마지막으로 기능 표시줄이 하단에 확장되고 [삭제]를 클릭하여 완료합니다.

CUDA의 보편적인 행렬 곱셈: 입문부터 숙련까지! Mar 25, 2024 pm 12:30 PM

GEMM(일반 행렬 곱셈)은 많은 응용 프로그램과 알고리즘의 중요한 부분이며 컴퓨터 하드웨어 성능을 평가하는 중요한 지표 중 하나이기도 합니다. GEMM 구현에 대한 심층적인 연구와 최적화는 고성능 컴퓨팅과 소프트웨어와 하드웨어 시스템 간의 관계를 더 잘 이해하는 데 도움이 될 수 있습니다. 컴퓨터 과학에서 GEMM의 효과적인 최적화는 컴퓨팅 속도를 높이고 리소스를 절약할 수 있으며, 이는 컴퓨터 시스템의 전반적인 성능을 향상시키는 데 중요합니다. GEMM의 작동 원리와 최적화 방법에 대한 심층적인 이해는 현대 컴퓨팅 하드웨어의 잠재력을 더 잘 활용하고 다양하고 복잡한 컴퓨팅 작업에 대한 보다 효율적인 솔루션을 제공하는 데 도움이 될 것입니다. GEMM의 성능을 최적화하여

WeChat에서 차단 및 삭제되어 영구적으로 추가될 수 없다는 것이 사실인가요? Apr 08, 2024 am 11:41 AM

1. 우선, 누군가를 영구 차단 및 삭제하고 영구 추가하지 않는 것은 허위입니다. 상대방을 차단하고 삭제한 후 추가하려면 상대방의 동의만 있으면 됩니다. 2. 사용자가 누군가를 차단하면 상대방은 해당 사용자에게 메시지를 보낼 수 없고, 사용자의 친구 서클을 볼 수 없으며, 사용자와 통화할 수 없습니다. 3. 차단은 사용자의 WeChat 연락처 목록에서 상대방을 삭제하는 것을 의미하지 않습니다. 4. 상대방을 차단한 후 자신의 위챗 연락처 목록에서 상대방을 삭제한 경우, 삭제 후 복구할 수 있는 방법이 없습니다. 5. 상대방을 다시 친구로 추가하려면 상대방이 동의한 후 다시 친구를 추가해야 합니다.

워드 문서에서 덧셈, 뺄셈, 곱셈, 나눗셈을 계산하는 방법 Mar 19, 2024 pm 08:13 PM

WORD는 워드를 사용하여 다양한 텍스트를 편집할 수 있는 강력한 워드 프로세서입니다. Excel 표에서는 덧셈, 뺄셈, 승수 계산 방법을 익혔습니다. 따라서 Word 표에서 숫자의 덧셈을 계산해야 한다면, 승수를 빼는 방법은 계산기로만 계산할 수 있나요? 대답은 물론 '아니요'입니다. WORD도 그렇게 할 수 있습니다. 오늘은 Word 문서에서 수식을 사용하여 표의 덧셈, 뺄셈, 곱셈, 나눗셈 등의 기본 연산을 계산하는 방법을 함께 배워보겠습니다. 그럼 오늘은 WORD 문서에서 덧셈, 뺄셈, 곱셈, 나눗셈을 계산하는 방법을 자세히 보여드리겠습니다. 1단계: WORD를 열고 툴바의 [삽입] 아래 [표]를 클릭한 후 드롭다운 메뉴에 표를 삽입합니다.

Xiaohongshu 릴리스를 삭제하는 방법은 무엇입니까? 삭제 후 복구하는 방법은 무엇입니까? Mar 21, 2024 pm 05:10 PM

인기 있는 소셜 전자상거래 플랫폼인 Xiaohongshu는 일상생활과 쇼핑 경험을 공유하기 위해 많은 사용자를 끌어 모았습니다. 때때로 당사는 개인 이미지를 더 잘 유지하거나 플랫폼 규정을 준수하기 위해 적시에 삭제해야 하는 일부 부적절한 콘텐츠를 실수로 게시할 수 있습니다. 1. Xiaohongshu 릴리스를 삭제하는 방법은 무엇입니까? 1. Xiaohongshu 계정에 로그인하고 개인 홈페이지에 들어갑니다. 2. 개인 홈페이지 하단의 '내 창작물' 옵션을 찾아 클릭하여 입장합니다. 3. "내 창작물" 페이지에서는 노트, 동영상 등 게시된 모든 콘텐츠를 볼 수 있습니다. 4. 삭제가 필요한 콘텐츠를 찾아 오른쪽에 있는 "..." 버튼을 클릭하세요. 5. 팝업 메뉴에서 "삭제" 옵션을 선택하세요. 6. 삭제 확인 후 해당 콘텐츠는 개인 홈페이지 및 공개 페이지에서 사라집니다.

Xiaohongshu에서 다른 사람이 삭제한 댓글을 어떻게 검색할 수 있나요? 다른 사람의 댓글이 삭제되면 표시되나요? Mar 21, 2024 pm 10:46 PM

Xiaohongshu는 인기 있는 소셜 전자상거래 플랫폼으로, 사용자 간의 쌍방향 댓글은 플랫폼에서 없어서는 안될 커뮤니케이션 방법입니다. 때때로 우리의 댓글이 다른 사람에 의해 삭제되어 혼란스러울 수 있습니다. 1. Xiaohongshu에서 다른 사람이 삭제한 댓글을 어떻게 검색할 수 있나요? 댓글이 삭제된 것을 발견하면 먼저 플랫폼에서 관련 게시물이나 제품을 직접 검색하여 해당 댓글을 찾을 수 있는지 확인할 수 있습니다. 삭제 후에도 댓글이 계속 표시된다면 원래 게시물 소유자가 삭제했을 수 있습니다. 이때 원래 게시물 소유자에게 연락하여 댓글 삭제 이유를 문의하고 댓글 복원을 요청할 수 있습니다. 댓글이 완전히 삭제되어 원래 게시물에서 찾을 수 없는 경우, 해당 댓글이 플랫폼에 복원될 가능성은 상대적으로 희박합니다. 다른 방법을 시도해 볼 수 있습니다.

hiberfil.sys 파일이란 무엇입니까? hiberfil.sys를 삭제할 수 있나요? Mar 15, 2024 am 09:49 AM

최근 많은 네티즌들이 편집자에게 hiberfil.sys 파일이 무엇인지 문의했습니다. hiberfil.sys가 C 드라이브 공간을 많이 차지하고 삭제될 수 있나요? 편집자는 hiberfil.sys 파일을 삭제할 수 있음을 알려줄 수 있습니다. 아래에서 자세한 내용을 살펴보겠습니다. hiberfil.sys는 Windows 시스템의 숨겨진 파일이자 시스템 최대 절전 모드 파일입니다. 일반적으로 C 드라이브의 루트 디렉터리에 저장되며 크기는 시스템에 설치된 메모리 크기와 동일합니다. 이 파일은 컴퓨터가 최대 절전 모드일 때 사용되며, 복구 시 빠르게 이전 상태로 복원할 수 있도록 현재 시스템의 메모리 데이터를 담고 있습니다. 크기가 메모리 용량과 동일하므로 하드 드라이브 공간을 더 많이 차지할 수 있습니다. 동면

WeChat 파일 전송 도우미를 완전히 삭제하는 방법_WeChat 파일 전송 도우미를 닫는 방법 소개 Mar 20, 2024 pm 08:31 PM

WeChat의 파일 전송 도우미는 모든 사용자가 사용할 수 있습니다. 일부 사용자는 이를 메모로 사용하여 일부 내용을 기록합니다. 그렇다면 WeChat 파일 전송 도우미를 완전히 삭제하는 방법은 무엇입니까? 아래에서 자세히 소개해드리겠습니다. WeChat 파일 전송 도우미를 완전히 삭제하는 방법은 무엇입니까? 답변: [WeChat]-[파일 전송 도우미 길게 누르기]-[이 채팅 삭제]. 구체적인 단계: 1. 먼저 홈 페이지에 들어간 후 [파일 전송 도우미]를 찾아 길게 누릅니다. 2. 그러면 팝업이 읽지 않음으로 표시되고 채팅을 상단에 고정합니다. 채팅을 표시하지 않고 채팅을 삭제합니다. 여기에서 [이 채팅 삭제]를 클릭할 수 있습니다.

See all articles

Angular를 사용하여 기본 장바구니 기능을 구현하는 방법

핫 AI 도구

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

Video Face Swap

인기 기사

뜨거운 도구

메모장++7.3.1

SublimeText3 중국어 버전

스튜디오 13.0.1 보내기

드림위버 CS6

SublimeText3 Mac 버전

뜨거운 주제