먼저 렌더링을 살펴 보겠습니다.
쇼핑 카트
1. 코드
이 효과를 읽은 후이 작업을 수행하는 방법에 관심이 있다면 계속 읽으십시오. 별로는 코드를 업로드하기 만하면됩니다.
HTML 코드 :
<! doctype html> <html lang = "en"ng-app = "cart"> <head> <meta charset = "utf-8"> <title> 쇼핑 카트 </title> <link rel = "스타일 시트" href = "../ 스크립트/angular-1.4.0-rc.2/docs/구성 요소/부트 스트랩 -3.1.1/css/bootstrap.min.css"> <link rel = "stylesheet"href = "main.css"> </head> <body ng-controller = "cartctr"> <테이블 s-show = "remots.legreng"> <caption> angularjs 구현 cart </caption> <tr> <th> 일련 번호 </th> <th> 제품 정보 </th> <th> 단가 (yuan) </th> <th> 수량 </th> <th> 양 (yuan) </th> <th> 운영 </th> </tr> <tr ng-repeat = "항목 <{{{{{{{{{{{{{{{{ ^ {{{{{tr ng-repeat). 1}}} </td> <td> <a href = "{{item.linkurl}}"target = "_ blank"> {{item.title}} </a> </td> <td> {{item.price | number : 2}} <td> <td> <td> <td> <td>. ng-disabled = "item.quantity <= 1">-</button> <입력 유형 = "text"size = "5"ng-model = "item.quantity"ng-keydown = "attrityKeydown ()"ng-keyup = "QuantityKeyup ()"> <button type = "ng-click ="adit.id) ">+</td. <td> {{item.price*item.quantity | number : 2}}} </td> <td> <버튼 유형 = "버튼"ng-click "ng-click"ng-click = "delete (item.id)"> delete </button </td> </td> </td> </table> <div ng-show = "! <span> {{getQuantites ()}} </span> Total : <span ng-show = "getTotalamount () <15000"> {{getTotalamount () | 번호 : 2}} </span> <span ng-show = "getTotalamount ()> = 15000"> {gettotalamount ()*할인 | 번호 : 2}} <span> (10% 꺼짐) </span> <span> ({gettotalamount () | 번호 : 2}}) </span> <버튼 유형 = "ng-click ="alertsubmit () "> checkout> </div> </div> <script src = "../ Scripts/Angular-1.4.0-Rc.2/Angular.js"> </script> <script src = "app.js"> </script> </body> </html>JS 코드 :
/2016/5/25에 WQQ에 의해 만들어졌습니다. /var cartmodule = angular.module ( 'cart', []); cartModule.controller ( 'cartctr', [ '$ scope', function ($ scope) {$ scope.discount = 0.9; $ scope.items = [{id : 10001, title : "Web Full-Stack Engineer의 과일 과일 : 40.80, 240 : 2, 링크어 : 40.80. "https://detail.tmall.com/item.htm?spm=a1z0d.6639537.1997196601.4.cwywjs&id=532166746631"}, {id : 10002, 제목 : "MacBook 15 Interna 15 Intina" "https://detail.tmall.com/item.htm?spm=a1z0d.6639537.1997196601.26.cwywjs&id=45771116847"}, {id : 10003, 제목 : "Surface Book I5 128g 독립 그래픽 카드", 11088.00 : 11088.00 : 1, linkurl : "https://detail.tmall.com/item.htm?spm=a1z0d.6639537.1997196601.15.cwywjs&id=525614504276"}, {id : 10004, 제목 : "lenovo yoga3pro i5 4g" 수량 : 1, linkurl : "https://detail.tmall.com/item.htm?spm=a1z0d.6639537.1997196601.37.cwywjs&id=41541519814"}; (item, index) {if (item.id === id) {item.quantity ++;}}}; 비 양성 정수. 105) || 화살표 키 ↑ → 숫자 키, 백 스페이스 (keycode) target.target.srcelement = event.keycode; id) {확인 ( "쇼핑 카트 에서이 항목을 삭제 하시겠습니까?") {$ scope.splice (index, 1); {parseint}; $ scope.alertsubmit = function () {alert ( "각도 쇼핑 카트");2. 분석
부트 스트랩 스타일을 무시하십시오. 우리는 Angular에만 집중합니다. 코드는 매우 간단합니다. 간단히 분석하겠습니다.
1. 준비
먼저 cart 모듈 인 cartCtr 컨트롤러를 정의하여 HTML 코드에 소개합니다. 동시에, 우리는 쇼핑 카트의 물건을 시뮬레이션하기 위해 JS의 배열 items 정의합니다.
2. NG- 반복 반복자
items 의 데이터를 동적으로 통과시키기 위해 배열을 쉽게 가로 지르고 DOM 요소를 생성 할 수있는 내장 명령어 ng-repeat 사용합니다. 여기서 우리는 4 <tr> 태그를 생성하기 위해 고리합니다.
<tr ng-repeat = "항목의 항목">
item items 배열의 객체입니다. 이것이 JS의 for/in 루프라고 생각하십니까? ~. NET 개발자이고 ASP.NET MVC Razor를 사용했다면 다른 언어에서 DOM 요소의 원활한 작동에 익숙합니다. Java와 PHP가 비슷한 구문을 가지고 있는지에 관해서는 모르겠습니다. 저는 열심히 일하는 .NET 개발자입니다.
NG 반복 반복자
우리는 $index 우리가 정의하는 것이 아니라 ng-repeat 에있는 첫 번째 TD에서 사용되는 것을 볼 수 있습니다. 그 값은 0부터 시작하는 items 의 현재 item 의 색인이므로 $index+1 시퀀스 번호로 사용하고 다른 ( item 과 linkUrl ) 데이터 바인딩을 사용합니다.
우리는 단가와 금액으로 {{xxx | number : 2}}을 사용했습니다. 이것은 각도의 필터입니다. 그 기능은 이전 값 XXX를 두 십수 자리로 유지하는 것입니다. 금액은 물론 더 정확해야합니다. 방금 필터라고 말했기 때문에 currency 와 같은 다른 것들이 있습니다. XXX 앞에 $ 기호를 추가하여 미국 달러를 대표 할 수 있으며 Baidu의 다른 필터를 직접 사용할 수 있습니다.
3. 이벤트 추가
현재 인터페이스에 숫자 +, - 버튼 및 삭제 버튼이 있습니다. 이러한 이벤트는 비교적 간단합니다. ng-click 사용하여 클릭 이벤트를 요소에 추가하십시오. 특정 제품의 ID를 전달하여 제품을 찾은 다음 제품을 추가, 빼기 및 삭제하십시오. 그러나 ng-disabled 태그가 "-"버튼에 추가됩니다. 이 이름에 따르면 HTML의 disabled 속성을 쉽게 생각할 수 있습니다. 기능은 ng-disabled 의 값이 사실 일 때 DOM 요소를 비활성화하는 것입니다. 마찬가지로, 아래에 사용 된 ng-show 동일합니다. 참을 때 표시되고 거짓일 때 숨겨져 있습니다. 숫자 인 경우 자동으로 boolean 값으로 변환됩니다. 0은 false이고, 0은 사실입니다. 음수는 또한 사실입니다! . 여기서는 숫자가 더 작 으면 직접 삭제할 수 있기 때문에 1의 수를 줄이지 않도록합니다.
그런 다음 ng-keydown 이벤트를 입력 요소에 추가하여 화살표 키 ↑ → ↓ ←, 숫자 키 및 backspace 만 입력 할 수 있도록합니다. 그런 다음 목표를 달성하고 목표를 달성했지만 "00021"과 같은 숫자를 입력 할 수있었습니다. Taobao의 쇼핑 카트를보고 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 에 추가하지 말고 다른 이벤트를 추가하지 않겠습니까? value target.value keydown 이벤트가 트리거 될 때 여전히 원래 값이므로 키 입력이 포함되지 않기 때문입니다. keydown 후 값은 새로운 값입니다. 현재 keyup 이벤트를 트리거하여 목표를 달성 할 수 있습니다. 타오바오 쇼핑 카트의 효과를 비교할 수 있습니다. 마지막에 입력되지 않는 한 텍스트 상자는 항상 집중력을 잃을 것이기 때문에 내 경험이 그보다 낫다고 생각합니다. . .
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 사용에 도움이되기를 바랍니다. 궁금한 점이 있으면 의사 소통을 위해 메시지를 남길 수 있습니다.