<!doctype html> <html lang="en" ng-app> <head> <meta charset="UTF-8"> <title>用ng搭建一个简单的购物系统</title> <link rel="stylesheet" href="css/bootstrap.min.css"> <script type="text/javascript" src="js/angular.min.js"></script> <style type="text/css"> input[type=button]{ font-size: 12px; } input[type=text]{ width: 35px; } input[name=quantity]{ width : 100px; } input[name=title]{ width: 100px; } </style> </head> <body> <div ng-controller="ShopListController"> <table class="table table-striped table-bordered"> <thead> <th>ID</th> <th>商品名</th> <th>单价</th> <th>数量</th> <th>总价</th> <th>操作</th> </thead> <tbody> <!-- 迭代 --> <tr ng-repeat="item in items"> <td>{{item.id}}</td> <td>{{item.title}}</td> <td>{{item.price}}</td> <td>{{item.quantity}}</td> <td>{{item.price*item.quantity}}</td> <td> <input type="button" value="删除当前商品" ng-click="removeList($index)"> <input type="button" ng-model="item.quantity" value="+" ng-click="addQ($index)"> <input type="button" ng-model="item.quantity" value="-" ng-click="removeQ($index)"> </td> </tr> </tbody> </table> <input type="button" value="添加一条记录" ng-click="addList()"> </div> <script type="text/javascript"> var items = [ { id : '2' , title : '康师傅牛肉面', quantity : 5 , price : 20 }, { id : '3' , title : '奶粉', quantity : 100 , price : 5 }, { id : '5' , title : '王老吉', quantity : 4, price : 15 }, { id : '1' , title : '数码相机', quantity : 1 , price : 6000 }, { id : '4' , title : 'ipad mini', quantity : 2 , price : 2300 } ]; function ShopListController($scope){ $scope.items = items; $scope.removeList = function(index){ $scope.items.splice(index,1); }; // 不用再传参数 $scope.addList = function(){ $scope.items.splice(1,0,{ id : '4' , title : 'ipad mini', quantity : 2 , price : 2300 }); }; $scope.addQ = function(index){ $scope.items[index].quantity++; }; $scope.removeQ = function(index){ var q = $scope.items[index].quantity; if(q == 0){ return false; } $scope.items[index].quantity--; } } </script> </body> </html>