标签：
<span style="font-family:Microsoft YaHei;font-size:18px;"><!DOCTYPE html>
<html ng-app="mymodule">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="css/bootstrap.min.css">
</head>
<body>
<div class="panel panel-default panel-primary">
<div class="panel-heading">我的购物车</div>
<div class="panel-body">
<!--ng-repeat ng-click -->
<!--scope注册了一个watcher-->
<!--
1.AngularJS会首先将你在{{ }}中声明的表达式编译成函数并调用$watch方法
-->
<!--
2.$watch方法的第一个参数是一个函数，它通常被称为watch函数，它的返回值声明需要监听的变量；第二个参数是listener，在变量发生改变的时候会被调用。-->
<table ng-controller="CartController" class="table table-bordered">
<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>
<!--filter应用-->
<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>
</div>
</div>
</body>
<script src="js/angular-1.3.0.js"></script>
<script src="ng-repeat.js"></script>
<script src="js/jquery.js"></script>
<script src="js/bootstrap.min.js"></script>
</html></span><span style="font-family:Microsoft YaHei;font-size:18px;">jS中代码：</span>
<span style="font-family:Microsoft YaHei;font-size:18px;">var mymodule=angular.module('mymodule', []);
mymodule.controller('CartController', ['$scope',
function CartController($scope) {
$scope.items = [
{name: "Angular应用", quantity: 1, price: 199.00},
{name: "Angular入门", quantity: 1, price: 139.00},
{name: "AngularJS权威教程", quantity: 2, price: 84.20}
];
//直接绑定事件remove
$scope.remove = function (index) {
$scope.items.splice(index, 1);
}
}
])
</span>
标签：
原文地址：http://blog.csdn.net/zhou2s_101216/article/details/51347851
