多くのプロジェクトがWebサーバーで行われています。フロントエンドとバックエンドの書き込みJSPコード。両当事者は、責任を区別するために密接に協力する必要があります。一部のプロジェクトは、バックエンドで安らかな方法を提供し、フロントエンドはAjaxでループを呼び出します。これは通常、多くのjQueryスペル文字列であり、直感的ではありません。一部の人々はJSテンプレートを作成しましたが、それほど良くありません。
Angularjsを使用する方がはるかに楽しいです、そして、構文はJSPに似ています:
<!doctype html> <html ng-app> <head> <meta charset = "utf-8"> <title> ng-repeat directive </title> </head> <body> <table ng-controller = "cartcontroller"> <キャプション>私のショッピングカート</キャプション> <th>数量</th> <th> operation </th> <th>操作</th> </tr> <ttr ng-repeat = "アイテムのアイテム"> <td> {{$ index + 1}} </td> <td> {{item.name}}}}} </td> <td> {{item.price |通貨}} </td> <td> <input ng-model = "item.quantity"> </td> <td> {{item.quantity * item.price |通貨}} </td> <td> <button ng-click = "remove($ index)"> remove </button> </td> </td> </tr> </table> <script src = "../ lib/angularjs/1.2.26/angular.min.js"> </scorct.> <script> <scope($ scope) {name: "Rapoo(Rapoo)V500 Mechanical Game Keyboard Mechanical Yellow Axle"、数量:1、Price:199.00}、{name: "Rapoo V20 Optical Gaming Mouse Black Flame Edition"、数量:1、Price:139.00}、{name: "Angularjs Authoritative Tutorial"、Quants:2、Price:84.20}]; $ scope.remove = function(index){$ scope.items.splice(index、1); }} </script> </body> </html>NG-Reepeatディレクティブの寿命は、コンテンツをループする必要がある要素にあります。アイテムは、コントローラーの変数名に対応しています。アイテムは、配列内の単一のオブジェクトのエイリアスです。 $ indexは、0から$ first、$ middle、および$ lastがブール値を返すことができる現在の参照オブジェクトの注文番号を返すことができます。