<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
tbody tr:nth-child(even) {
background-color: aqua;
}
tbody tr:nth-child(odd) {
background-color: gold;
}
;
</style>
<script type="text/javascript" src="../js/angular.js"></script>
<script>
var app = angular.module("myapp", []);
app.controller("mycon", function($scope) {
$scope.shang = [{
id: 1,
name: "橘子",
shu: 20,
jia: 10,
state: false
}, {
id: 9,
name: "苹果",
shu: 16,
jia: 20,
state: false
}, {
id: 3,
name: "柚子",
shu: 18,
jia: 15,
state: false
}, {
id: 6,
name: "榴莲",
shu: 5,
jia: 98,
state: false
}];
//总计
$scope.zong = function() {
var sun = 0;
for(var i = 0; i < $scope.shang.length; i++) {
sun += $scope.shang[i].jia * $scope.shang[i].shu;
}
return sun;
};
//删除
$scope.shanchu = function($index) {
$scope.shang.splice($index, 1);
};
//全选反选
$scope.quan = false;
$scope.fanxuan = function() {
if($scope.quan) {
for(index in $scope.shang) {
$scope.shang[index].state = true;
}
} else {
for(index in $scope.shang) {
$scope.shang[index].state = false;
}
}
};
//批量删除
$scope.pisan = function() {
if(confirm("确定删除吗")) {
for(var i = 0; i < $scope.shang.length; i++) {
if($scope.shang[i].state == true) {
$scope.shang.splice(i, 1);
i--;
}
}
}
}
//添加
$scope.tian = function() {
var s = {
id: $scope.add_id,
name: $scope.add_name,
shu: $scope.add_shu,
jia: $scope.add_jia
}
$scope.shang.push(s);
}
//修改回显
$scope.xiugai=function($index){
$scope.a = true;
var name1 = $scope.shang[$index].name;
var shu1 = $scope.shang[$index].shu;
var jia1 = $scope.shang[$index].jia;
$scope.x_name = name1;
$scope.x_shu= shu1;
$scope.x_jia= jia1;
$scope.i = $index;
}
//确认修改
$scope.ok=function(){
var xinshang = {"name":$scope.x_name,"shu":$scope.x_shu,"jia":$scope.x_jia};
$scope.shang.splice($scope.i,1,xinshang);
}
})
</script>
</head>
<body ng-app="myapp" ng-controller="mycon">
<center>
<h2>账单查询</h2>
<input type="text" ng-model="add_id"/>
<input type="text" ng-model="add_name" />
<input type="text" ng-model="add_shu" />
<input type="text" ng-model="add_jia" />
<button ng-click="tian()">添加</button><br>
<input type="text" placeholder="查询" ng-model="mohu" />
<select ng-model="pai">
<option value="">- 请选择 -</option>
<option value="jia">-价格低到高-</option>
<option value="-jia">-价格高到低-</option>
</select>
<button ng-click="pisan()">批量删除</button>
<table border="1" cellpadding="15" cellspacing="0">
<thead>
<tr>
<th><input type="checkbox" ng-model="quan" ng-click="fanxuan()"></th>
<th>编号</th>
<th>名称</th>
<th>数量</th>
<th>价钱</th>
<th>小计</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="diao in shang | filter:{name:mohu} | orderBy:pai ">
<td><input type="checkbox" ng-model="diao.state"></td>
<td ng-if="">{{$index}}</td>
<td>{{diao.id}}</td>
<td>{{diao.name}}</td>
<td>{{diao.shu}}</td>
<td>{{diao.jia | currency}}</td>
<td ng-app="">{{diao.jia*diao.shu}}</td>
<td><button ng-click="shanchu($index)">删除</button>
<button ng-click="xiugai($index)">修改</button>
</td>
</tr>
</tbody>
</table>
总价：{{zong() | currency:'RMB￥'}}<br>
名字：<input type="text" ng-model="x_name"/><br>
数量：<input type="text" ng-model="x_shu"/><br>
价格：<input type="text" ng-model="x_jia"/><br>
<button ng-model="i" ng-click="ok(index)">ok</button>
</center>
</body>
</html>