Getting started with AngularJS (using the ng-repeat directive to implement loop output

Getting started with AngularJS (using the ng-repeat directive to implement loop output_AngularJS

WBOY

Release： 2016-05-16 15:02:16

Original

1748 people have browsed it

Many projects of loop output list are done on the web server. The front-end prepares templates and the back-end writes jsp code. Both parties need to work closely to distinguish responsibilities. Some projects provide restful methods on the backend, and the frontend uses ajax to call its own loop. This usually involves a lot of jquery strings, which is too unintuitive. Some people have come up with js templates, but they are not much better.

It’s much better to use AngularJS, the syntax is similar to 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>

Copy after login

The ng-repeat directive lives on the element that needs to loop content. items corresponds to the variable name on the controller. item is an alias for a single object in the array. $index can return the serial number of the current reference object, starting from 0. In addition, $first, $middle, and $last can return Boolean values to tell you whether the current element is the first, middle, and last element in the collection.