html部分,用bootstrap定义样式
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>图书增删改</title>
<link href="css/bootstrap.css" rel="stylesheet">
<script src="script/angular.min.js"></script>
<script src="script/books.js"></script>
</head>
<body ng-app="myApp" ng-controller="userCtrl">
<div class="container">
<h1>图书列表</h1>
<table class="table table-striped">
<thead>
<tr>
<th>编辑</th>
<th>商品名称</th>
<th>价格</th>
<th>数量</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="book in books" >
<td>
<button class="btn btn-danger" ng-click="delete(book)" >删除</button>
<button class="btn btn-warning" ng-click="edit(book)">编辑</button>
</td>
<td>{{ book.bName | bookmark}}</td>
<td>{{ book.bPrice| currency:'¥'}}</td>
<td class="col-xs-1">
<input type="number" class="form-control" min="1" max="10" ng-model="book.bNum" ng-disabled="book.noedit"/>
</td>
</tr>
</tbody>
</table>
<div class="pull-left">
<button class="btn btn-success" ng-click="save()" ng-disabled="nosave">保存</button>
</div>
<div class="pull-right" >
<label class="btn btn-info">合计</label>
<label>{{totalPrice() |currency:'¥'}}</label><br>
</div>
<div class="clearfix"></div>
<hr>
<div class="form-group">
<button class="btn btn-success" ng-click="addBook()" ng-disabled="bookform.$invalid">
添加新图书
</button>
</div>
<form name="bookform" class="form-horizontal col-md-2">
<div class="form-group">
<label>图片名称:</label>
<input type="text" class="form-control" required ng-model="bName" ng-disabled="!edit" >
</div>
<div class="form-group">
<label>价格:</label>
<input type="text" class="form-control" required ng-model="bPrice"/>
</div>
<div class="form-group">
<label>数量:</label>
<input type="number" class="form-control" min="1" max="10" required ng-model="bNum"/>
</div>
</form>
</div>
</body>
</html>
js部分
var booklist = [
{id:1, bName:'HTML5+CSS3从入门到精通(附光盘)',bPrice:59.5,bNum:1,noedit:true },
{id:2, bName:'HTM5权威指南',bPrice:112.10,bNum:1,noedit:true},
{id:3, bName:'响应式web设计',bPrice:42.60,bNum:2,noedit:true},
{id:4, bName:'深入理解HTML5',bPrice:55.60,bNum:1,noedit:true},
{id:5, bName:'JavaScript高级编程',bPrice:33.70,bNum:1,noedit:true },
{id:6, bName:'锋利的jQuery',bPrice:28.90,bNum:1,noedit:true }
];
var app = angular.module('myApp', []);
//自定义书名号过滤器
app.filter('bookmark', function(){
return function(item){
return "《" + item + "》";
}
});
//创建控制器
app.controller('userCtrl', function($scope) {
$scope.bName = '';
$scope.bPrice = '';
$scope.tPrice = 0;
$scope.nosave = true;
$scope.books = booklist;
//删除图书
$scope.delete = function(book) {
$scope.books.splice($scope.books.indexOf(book), 1);
};
//编辑图书
$scope.edit = function(book){
$scope.nosave = false;
book.noedit = false;
};
//保存修改
$scope.save = function(){
$scope.nosave = true;
angular.forEach($scope.books,function(data){
data.noedit = true;
});
};
//添加图书
$scope.addBook = function(){
if(!isNaN(parseFloat($scope.bPrice))){
var i = $scope.books.length;
$scope.bPrice= parseFloat($scope.bPrice); //将价格转换为浮点数
$scope.books.push({id:i, bName:$scope.bName,bPrice:$scope.bPrice,bNum:$scope.bNum,noedit:true });
$scope.bName = "";
$scope.bPrice = "";
}
};
//计算总价
$scope.totalPrice = function(){
var sum = 0;
angular.forEach($scope.books, function(data){
sum = sum + data.bPrice*data.bNum;
});
return sum;
}
});