AngularJS 시작하기(ng-repeat 지시문을 사용하여 루프 출력 구현_AngularJS
- WBOY원래의
- 2016-05-16 15:02:161743검색
루프 출력 목록의 많은 프로젝트는 웹 서버에서 수행됩니다. 프런트엔드는 템플릿을 준비하고 백엔드는 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 값을 반환할 수 있습니다. 컬렉션의 요소입니다.
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.