结果：
代码：
<!DOCTYPE html>
<html ng-app="myApp">
<head lang="en">
<meta charset="UTF-8">
<script src="js/angular.js"></script>
<title></title>
</head>
<body>
<!--
1、搭建MVC的架子
2、构造数据
3、显示
4、实现添加
5、实现删除
-->
<div ng-controller="myCtrl">
<button ng-click="addToCart()">
添加
</button>
<table>
<thead>
<tr>
<th>单价</th>
<th>数量</th>
<th>小计</th>
<th>删除</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="obj in cart track by $index">
<td>{{obj.price}}</td>
<td>{{obj.count}}</td>
<td>{{obj.price*obj.count}}</td>
<td>
<button
ng-click="deleFromCart($index)">
删除
</button>
</td>
</tr>
</tbody>
</table>
</div>
<script>
var app = angular.module(‘myApp‘,[‘ng‘]);
app.controller(‘myCtrl‘, function ($scope) {
$scope.cart = [
{price:40,count:3},
{price:20,count:2},
{price:90,count:1}
];
$scope.addToCart = function () {
var newObj = {
price:Math.floor(Math.random()*20),
count:Math.floor(Math.random()*10)
};
$scope.cart.push(newObj);
}
$scope.deleFromCart = function (index) {
$scope.cart.splice(index,1);
}
})
</script>
</body>
</html>
时间： 2024-10-13 16:20:07