1页面的编写
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link href="../css/bootstrap.css" rel="stylesheet"/>
<script src="../js/jquery-3.0.0.min.js"></script>
<script src="../js/bootstrap.min.js"></script>
<script src="../js/angular.min.js"></script>
<script src="../js/book.js"></script>
</head>
<body ng-app="myApp">
<div class="container" ng-controller="myCtrl">
<div class="well">
<h2>图书列表</h2>
<table class="table table-striped">
<tr>
<th>编辑</th>
<th>图书名称</th>
<th>价格</th>
<th>数量</th>
</tr>
<tr ng-repeat="item in items">
<td>
<input type="button" ng-click="delBook($this)" class="btn btn-danger" value="删除"/>
<input type="button" ng-click="edit(item)" class="btn btn-warning" value="编辑" />
</td>
<td>{{item.name|myFilter}}</td>
<td >{{item.price |currency:"￥"}}</td>
<td>
<input type="number" name="number" value="{{item.number}}" ng-model=item.number ng-disabled="item.noedit" max="10" min="0"/>
</td>
</tr>
<tr>
<td>
<input type="button" ng-click="save()" ng-disabled="nosave" class="btn btn-primary" value="保存" />
</td>
<td>
<div class="pull-right">
<input type="button" class="btn btn-success " value="合计"/>
<span>{{sum()|currency:"￥"}}</span>
</div>
</td>
</tr>
</table>
</div>
<div class="well">
<input type="button" class="btn btn-success" ng-click="addBook()" ng-disabled="myform.$invalid" value="添加新图书"/>
<form name="myform" >
<label>
图书名称：<input type="text" name="bookName" ng-model="bookName" required/>
</label><br/>
<label>
图书单价：<input type="number" name="price" min="1" ng-model="price" required/>
</label><br/>
<label>
购买数量：<input type="number" name="number" ng-model="number" max="10" min="1" required/>
</label>
</form>
</div>
</div>
</body>
</html>
2、js文件
<pre name="code" class="javascript">/**
* Created by Jing on 2016/10/12.
*/
var data = [{name: "html+css3", price: 56, number: 2, noedit: true},
{name: "angularJs", price: 16, number: 2, noedit: true},
{name: "jquery", price: 23, number: 2, noedit: true}]
var app=angular.module("myApp",[]);
app.controller("myCtrl",function($scope){
$scope.items=data;
// 计算总和
$scope.sum=function(){
var count=0;
angular.forEach($scope.items,function(item){
count+=item.price*item.number
})
return count;
}
// 添加新图书
$scope.addBook=function(){
$scope.items.push({name:$scope.bookName,price:$scope.price,number:$scope.number});
$scope.bookName="";
$scope.price="";
$scope.number="";
}
// 删除图书
$scope.delBook=function(index){
$scope.items.splice(index,1)
}
$scope.nosave=true;
// 编辑图书
$scope.edit=function(item){
$scope.nosave=false;
item.noedit=false;
}
// 保存图书
$scope.save=function(){
angular.forEach($scope.items,function(item){
$scope.nosave=true;
item.noedit=true;
})
}
})
//自定义过滤器
app.filter("myFilter",function(){
return function(item){
return "《"+item+"》";
}
})
![]()
扫一扫
76
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
