使用bootstrap插件时需要同时使用jq插件，以及添加bt
<script> var items = [{ id : '1', name : '蜂蜜', price : 30.00 },{ id : '2', name : '黄豆酱', price : 15.8 }, { id : '3', name : '护手霜', price : 15.00 }, { id : '4', name : '保温杯', price : 29.9 }, { id : '5', name : '鼠标', price : 39.9 },{ id : '6', name : '米老头', price : 8.8 }]; var boughtList = {}; </script> <style> .left ul li{list-style:none; float:left;width:100px; height:100px} .itembox{width:400px; height:300px} </style> </head> <body> <div class="wrap" ng-app="myapp" ng-controller="showItem" ><!-- ng-controller ng的语法 --> <div class="left itembox border"> <ul> <li class="left" ng-repeat="value in items" item-id={{value.id}}> <p>{{value.name}}</p> <p> {{value.price}}</p> <p><a href="javascript:void(0);" ng-click="buyAction($event);" name={{value.name}} price={{value.price}} item-id={{value.id}} >购买</a> </li></ul> </div> <div class="boughtlist border"> <ul> <li ng-repeat="value in items" item-id={{value.id}}> <span>{{value.name}}</span> <span>{{value.price}}</span> <span style="100px;" item-id={{value.id}}> <a href="javascript:void(0);" ng-click="value.num=value.num+1;changeNum($event,value.num);" >+</a> <input type="number" min="0" ng-model="value.num" ng-init="value.num=1" ng-change="changeNum(value.id,value.num)"/> <a href="javascript:void(0);" ng-click="value.num=value.num-1;changeNum($event,value.num);">-</a> </span> <a href="javascript:void(0);" item-id={{value.id}} ng-click="delItem($event);" >删除</a> </li> </ul> </div> <p ng-init=0 >总价格：{{ total | number:1}}</p> </div>
css样式
ng js中要将加上放在最后
// JavaScript Document var myapp=angular.module('myapp',[]); myapp.controller('showItem',function($scope){ $scope.items = items; $scope.boughtList = boughtList; $scope.total = 0; for(var k in boughtList){ if(boughtList[k]){ $scope.total += boughtList[k].num*boughtList[k].price; } } $scope.buyAction = function($event){ var el = $event.target; var id = el.getAttribute('item-id'); if(boughtList[id]){ boughtList[id].num += 1; }else{ var arr = []; arr.name = el.getAttribute('name'); arr.price = el.getAttribute('price'); arr.num = 1; arr.id = id; boughtList[id] = arr; } $scope.total = common.getTotal($scope.total); } $scope.delItem = function($event){ var li = $event.target.parentNode; li.parentNode.removeChild(li); var id = $event.target.getAttribute('item-id'); if(boughtList[id]){ delete boughtList[id]; } $scope.total = common.getTotal($scope.total); } $scope.changeNum = function($event,num){ var id; if(typeof $event == 'string'){ id = $event; }else{ id = $event.target.parentNode.getAttribute('item-id'); } boughtList[id].num = num; $scope.total = common.getTotal($scope.total); } } ) var common = { getTotal : function(total){ //每次重新清零 算出总价，这样的话为什么还要传total参数？当时怎么想的？ total = 0; for(var k in boughtList){ if(boughtList[k]){ if(boughtList[k].num <=0){ boughtList[k].num = 0; } total += boughtList[k].num*boughtList[k].price; } } return total; } }
给table添加overflow，滚动条无效，要加display：block
display:block;
height:560px;
overflow-y:auto;
然后样式会乱，给表头添加
table thead, tbody tr { display:table; 100%; table-layout:fixed; }