AngularJS 시작하기(ng-repeat 지시문을 사용하여 루프 출력 구현

AngularJS 시작하기(ng-repeat 지시문을 사용하여 루프 출력 구현_AngularJS

WBOY

풀어 주다： 2016-05-16 15:02:16

원래의

1665명이 탐색했습니다.

루프 출력 목록의 많은 프로젝트는 웹 서버에서 수행됩니다. 프런트엔드는 템플릿을 준비하고 백엔드는 JSP 코드를 작성하여 책임을 구분해야 합니다. 일부 프로젝트는 백엔드에서 편안한 방법을 제공하며 프런트엔드는 자체 루프를 호출하기 위해 ajax를 사용합니다. 여기에는 일반적으로 너무 직관적이지 않은 많은 jquery 문자열이 포함되지만, 그다지 나아지지는 않습니다.

AngularJS를 사용하는 것이 훨씬 더 좋으며 구문은 JSP와 유사합니다.

<!doctype html>
<html ng-app>
<head>
  <meta charset="utf-8">
  <title>ng-repeat directive</title>
</head>
<body>
<table ng-controller="CartController">
  <caption>我的购物车</caption>
  <tr>
    <th>序号</th>
    <th>商品</th>
    <th>单价</th>
    <th>数量</th>
    <th>金额</th>
    <th>操作</th>
  </tr>
  <tr ng-repeat="item in items">
    <td>{{$index + 1}}</td>
    <td>{{item.name}}</td>
    <td>{{item.price | currency}}</td>
    <td><input ng-model="item.quantity"></td>
    <td>{{item.quantity * item.price | currency}}</td>
    <td>
      <button ng-click="remove($index)">Remove</button>
    </td>
  </tr>
</table>
 
<script src="../lib/angularjs/1.2.26/angular.min.js"></script>
<script>
  function CartController($scope) {
    $scope.items = [
      {name: "雷柏（Rapoo） V500 机械游戏键盘 机械黄轴", quantity: 1, price: 199.00},
      {name: "雷柏（Rapoo） V20 光学游戏鼠标 黑色烈焰版", quantity: 1, price: 139.00},
      {name: "AngularJS权威教程", quantity: 2, price: 84.20}
    ];
 
    $scope.remove = function (index) {
      $scope.items.splice(index, 1);
    }
  }
</script>
</body>
</html>

로그인 후 복사

ng-repeat 지시어는 콘텐츠를 반복해야 하는 요소에 있습니다. 항목은 컨트롤러의 변수 이름에 해당합니다. 항목은 배열의 단일 개체에 대한 별칭입니다. $index는 0부터 시작하여 현재 참조 객체의 일련 번호를 반환할 수 있습니다. 또한 $first, $middle, $last는 현재 요소가 첫 번째, 중간, 마지막인지 여부를 알려주는 Boolean 값을 반환할 수 있습니다. 컬렉션의 요소입니다.