最初にレンダリングを見てみましょう：
ショッピングカート
1。コード
この効果を読んだ後にこれを行う方法を知りたい場合は、読み続けてください。大したことは、コードをアップロードするだけです。
HTMLコード：
<！doctype html> <html lang = "en" 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 <キャプション> Angularjs実装カート</caption> <tr> <th>シリアル番号</th> <th>製品情報</th> <th <th </th> <th </th> <th>量</th> <th> </th> <th> operation </th> <th> operation </th> </tr> <tr ng-repeat = "Index + 1}} </td> <td> <a href = "{{item.linkurl}}"ターゲット= "_ blank"> {{item.title}}}}}}}}}} {item.price | number：2}}} </td> <td> <button = "ng-click =" ng-click = " ng-disabled = "item.quantity <= 1"> - </button> <input type = "text" size = "5" ng-model = "item.quantity" ng-keydown = "数量キーダウン（）" ng-keyup = "ng-keyup（）"> <ボタンタイプ= "ng-click =" <td> {{item.price*item.quantity | number：2}} </td> <td> <button type = "button" ng-click = "delete（item.id）"> delete </button> </td> </tr> </table> </table> <div ng-shohshow = " <span> {{getQuantites（）}} </span>合計：<span ng-show = "gettotalamount（）<15000"> {{gettotalamount（）| number：2}} </span> <span ng-show = "gettotalamount（）> = 15000" off）</span> <span>（{{gettotalamount（）| number：2}}）</span> </span> <ボタンタイプ= "button" ng-click = "alertsubmit（）"> checkout </button> </div> <scrip src = "../ scripts/angular-1.4.0-rc.2/angular.js"> 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： "The Self-Sultivation of Full-Stack Engineer" "https://detail.tmall.com/item.htm?spm=a1z0d.6639537.1997196601.4.4.4.46746631"}、 "https://detail.tmall.com/item.htm?spm=a1z0d.6639537.1997196601.26.26.26.26.26.26.26.26.26.26.26.26.26.26.26.26.26.26.26.26.26.26.26.26.26.26.26.26.26.26.26.26.26.26.26.26.26.26.26.26.26.26.26.26.26.26.26.26.26.26.26.26.26.26.26.26.26.26.26.26.26.26.26.26.26.26.10003、TITLE： 1、linkurl： "https://detail.tmall.com/item.htm?spm=a1z0d.6639537.1997196601.15.cwywjs&id=525614504276"}、{id：10004、 "lenovo yoga3pbra 7299.00、数量：1、linkurl： "https：//detail.tmall.com/item.htm?spm=a1z0d.6639537.1997196601.37.cwywjs&id=41541519814"}] angular.foreach（$ scope.items、function（item、index、array）{item.id === id）{item.quantity ++;}}}; //入力ボックスに入力しないように、cope.quantitekeydown = event || event.target.meycode = keycode.keycode; <= keycode &&キーコード== 8）{//矢印キー、バックスペース} =イベントwindow.targemen if.id == if（ "このアイテムをショッピングカートから削除する？"）{index、1）}}}}; （項目 += parseint） }; $ scope.alertsubmit = function（）{"Angular emplention Shopping Cart"）;2。分析
ブートストラップのスタイルを無視してください。角度にのみ焦点を当てています。コードは非常に簡単です。簡単に分析しましょう。
1。準備します
まず、 cartコントローラーcartCtr定義し、HTMLコードに紹介します。同時に、JSの配列itemsも定義して、ショッピングカートで物事をシミュレートします。
2。Ng-Reepeat Iterator
itemsのデータを動的に通過するために、Angularの組み込み命令ng-repeatを使用します。Angularは、配列を簡単に通過してDOM要素を生成できます。ここでは、4つ<tr>タグを生成するためにループします。
<tr ng-repeat = "アイテムのアイテム">
itemはitems配列内のオブジェクトです。これはJSのfor/inループであると感じますか？〜あなたが.NET開発者であり、ASP.NET MVC Razorを使用している場合、他の言語のDOM要素のシームレスな操作に精通しています。 JavaとPHPに同様の構文があるかどうかについては、わかりません。私は勤勉な.NET開発者です。
ng-Reepeat Iterator
$index 、定義するものではなく、 ng-repeatにある最初のTDで使用されていることがわかります。その値は、0から始まるitemsの現在のitemのインデックスであるため、シーケンス番号として$index+1を使用し、その他（ item linkUrl同様）データバインディングを使用します。
単価と金額列で{{xxx | number：2}}を使用しました。これは角度のフィルターです。その機能は、以前の値xxxを2桁の2つの場所に保つことです。金額に関しては、もちろんより正確でなければなりません。私はこれがフィルターだと言ったので、 currencyなど、他にもあります。 XXXの前に$シンボルを追加して米ドルを表すことができます。また、Baiduの他のフィルターを自分で使用できます。
3.イベントを追加します
現在のインターフェイスには、数字 +、 - ボタンと削除ボタンがあります。これらのイベントは比較的簡単です。 ng-clickを使用して、クリックイベントを要素に追加します。特定の製品のIDを渡すことにより、製品を見つけ、製品を追加、減算、削除します。ただし、「 - 」ボタンにng-disabledタグが追加されます。名前によれば、HTMLのdisabled属性を簡単に考えることができます。その機能はng-disabledの値が真の場合にDOM要素を無効にすることです。同様に、以下で使用されるng-show同じです。それは真であるときに表示され、偽りのときに隠されます。数字の場合、 boolean値に自動的に変換されます。 0はfalse、非0は真です。負の数も真実であることに注意してください！ 。ここでは、1の数を減らせません。数値が小さい場合、直接削除できるため〜
次に、 ng-keydownイベントを入力要素に追加して、矢印キーのみを入力できるようにします↑→↓←←queys、およびbackspace 。それから私は目標を達成しましたが、「00021」のような数字を入力することができましたが、これは明らかに満足のいくものではありませんでした。 Taobaoのショッピングカートを見て、0が前に入力されたときに、このテキストボックスの内容が自動的に更新され、前の0が削除されるため、 ng-keyupイベントを追加したことがわかりました。
$ scope.quantitykeyup = function（event）{event = event || window.event; // IE8以下と互換性がある場合、ターゲットはvarターゲット= event.target || event.srcelementでもあります。 var keycode = event.keycode; if（48 === keycode || 96 === keycode）{target.value = parseint（target.value）; }};この時点で、0を入力すると、テキストボックスの値が自動的に更新されます。 keydownに追加してみませんが、別のイベントを追加してみませんか？これは、 target.valueの値が、 keydownイベントがトリガーされ、キー入力が含まれていない場合でも元の値であるためです。 keydown後、値は新しい値です。この時点で、 keyupイベントをトリガーして目標を達成できます。 Taobaoショッピングカートの効果を比較できます。私の経験はそれよりも優れていると思います。なぜなら、最後に入力されていない限り、テキストボックスは常にフォーカスを失うからです。 。 。
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のすべての学習と使用に役立つことを願っています。ご質問がある場合は、メッセージを残してコミュニケーションをとることができます。