<html ng-app='myApp'>
<head>
<title>Your Shopping Cart</title>
<meta charset="utf-8">
</head>
<body ng-controller='CartController'>
<h1>Your Order</h1>
<div ng-repeat='item in items'>
<span>{{item.title}}</span>
<input ng-model='item.quantity'>
<span>{{item.price | currency}}</span>
<span>{{item.price * item.quantity | currency}}</span>
<button ng-click="remove($index)">Remove</button>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js"></script>
<script>
var app = angular.module('myApp', []);
app.controller('CartController', ['$scope', function($scope) {
$scope.items = [
{title: '油漆刷子', quantity: 8, price: 3.95},
{title: '油漆', quantity: 17, price: 12.95},
{title: '工作服', quantity: 5, price: 6.95}
];
$scope.remove = function(index) {
$scope.items.splice(index, 1);
}
}]);
</script>
</body>
</html>
以瀏覽器直接開啟app.html的執行結果：
#
沒有留言:
張貼留言