많은 프로젝트가 웹 서버에서 수행됩니다. 프론트 엔드 및 백엔드 쓰기 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"> <caption> 내 쇼핑 카트 </캡션> <th> serial </th> </th> <tu> <th> <tud> 가격 </th> <th> 수량 </th> <th> 금액 </th> <th> 운영 </th> </tr> <ttr ng-repeat = "항목의 항목"> <td> {{$ index + 1}} </td> <td> {{item.name}} </td> {item.price | Currency}}} </td> <td> <입력 ng-model = "item.quantity"> </td> <td> {{item.quantity * item.price | Currency}} </td> <td> <Button Ng-Click = "제거 ($ index)"> 제거 </button> </td> </td> </tr> </table> <script src = "../ lib/angularjs/1.2.26/angular.min.js"> {이름 : "Rapoo (rapoo (rapoo) v500 기계식 게임 키보드 기계식 노란색 액슬", 수량 : 1, 가격 : 199.00}, {이름 : "Rapoo V20 광학 게임 마우스 블랙 플레임 에디션", 수량 : 1, 가격 : 139.00}, {이름 : "Angularjs Aworitative Tutorial", Quantity : 2, 84.20}; $ scope.remove = function (index) {$ scope.items.splice (index, 1); }} </script> </body> </html>NG-Repeat Directive Life는 컨텐츠를 반복 해야하는 요소에 있습니다. 항목은 컨트롤러의 변수 이름에 해당합니다. 항목은 배열의 단일 객체에 대한 별칭입니다. $ index는 0 및 $ first, $ middle 및 $ last에서 시작하여 현재 참조 객체의 주문 번호를 반환 할 수 있습니다. $ boolean 값을 반환하여 현재 요소가 컬렉션의 첫 번째 중간에있는 마지막 요소인지 여부를 알려줍니다.