<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<script src="js/angular.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>
<title>月考</title>
<style type="text/css">
/*各行变色*/
tr:nth-child(odd) {
background: gainsboro;
}
tr:nth-child(even) {
background: white;
}
/*提示信息红色*/
span {
color: red;
}
</style>
</head>
<body ng-app="myApp" ng-controller="myCtrl">
<input type="text" placeholder="根据名字查询" ng-model="bname" />
<select ng-model="v">
<option>--排序--</option>
<option value="gid">编号正序</option>
<option value="-gid">编号倒序</option>
<option value="gcount">小计正序</option>
<option value="-gcount">小计倒序</option>
</select>
<input type="button" value="添加" ng-click="add()" />
<input type="button" value="批量删除" ng-click="deleAll()" />
<table border="1px" cellspacing="0px" cellpadding="0px">
<tr style="background: gray;">
<td><input type="checkbox" ng-click="xuan()"/>全选/反选</td>
<td>商品编号</td>
<td>商品名称</td>
<td>商品数量</td>
<td>商品单价</td>
<td>商品小计</td>
<td>操作</td>
</tr>
<tr ng-repeat="b in books|filter:bname|orderBy:v">
<td><input type="checkbox" /></td>
<td>{{b.gid}}</td>
<td>{{b.gname}}</td>
<td>{{b.gnum}}</td>
<td>{{b.gprice|currency:"￥"}}</td>
<td>{{b.gcount|currency:"￥"}}</td>
<td><input type="button" value="删除" ng-click="dele(b.gid)" /></td>
</tr>
</table>
<hr />
<div ng-show="isShow">
商品编号:<input type="text" placeholder="编号" ng-model="t_id" />
<span ng-show="id_tip">
*商品编号不能为空
</span>
<br> 商品名称:
<input type="text" placeholder="名称" ng-model="t_name" />
<span ng-show="name_tip">
*商品名称不能为空
</span>
<br> 商品数量:
<input type="text" placeholder="数量" ng-model="t_num" />
<span ng-show="num_tip">
*商品数量不能为空
</span>
<br> 商品单价:
<input type="text" placeholder="单价" ng-model="t_price" />
<span ng-show="price_tip">
*商品单价不能为空
</span>
<br>
<input type="button" value="保存" ng-click="save()" />
</div>
<script type="text/javascript">
var mo = angular.module("myApp", []);
mo.controller("myCtrl", function($scope, $http) {
//定义一个数组
$scope.books = [];
//进行网络请求
$http.get("data.json").then(function(req) {
$scope.books = req.data;
});
//單個刪除
$scope.dele = function(gid) {
//便利數組
var ok = confirm("确定要删除?");
if(ok) {
for(var i = 0; i < $scope.books.length; i++) {
var b = $scope.books[i];
if(b.gid == gid) {
$scope.books.splice(i, 1);
break
}
}
}
}
//批量删除
$scope.deleAll = function() {
//获取所有的选中的复选框
var cbs = $("[type=checkbox]:checked");
if(cbs.length == 0) {
alert("至少选一个");
return;
}
for(var i = 0; i < cbs.length; i++) {
var cb = cbs[i];
//根据复习框获取相应的gid
var tr = cb.parentNode.parentNode;
var td2 = tr.cells[1];
var gid = td2.innerHTML.trim(); //trim去掉左右的空格
for(var j = 0; j < $scope.books.length; j++) {
var b = $scope.books[j];
if(b.gid == gid) {
$scope.books.splice(j, 1);
break
}
}
}
}
//上面的按钮
$scope.add = function() {
$scope.isShow = true;
}
//点击保存按钮
$scope.save = function() {
//验证
var id = $scope.t_id;
console.log(id);
if(id == undefined) {
$scope.id_tip = true;
return;
} else {
$scope.id_tip = false;
}
var name = $scope.t_name;
if(name == undefined) {
$scope.name_tip = true;
return;
} else {
$scope.name_tip = false;
}
var num = $scope.t_num;
console.log(num);
if(num == undefined || num < 0) {
$scope.num_tip = true;
return;
} else {
$scope.num_tip = false;
}
var price = $scope.t_price;
if(price == undefined || price <= 0) {
$scope.price_tip = true;
return;
} else {
$scope.price_tip = false;
}
//当验证成共之后，将数据放入对象，将对象添加到数组
var obj = {
"gid": id,
"gname": name,
"gnum": num,
"gprice": price,
"gcount": (num * 1) * (price * 1)
};
// 注意：数量和价格，有时候需要转成数字。
$scope.books.push(obj);
}
//反选
$scope.xuan = function(){
var cbs = $("[type=checkbox]");
for (var i = 1;i<cbs.length;i++) {
var cb = cbs[i];
cb.checked = !cb.checked;
}
}
});
</script>
</body>
</html>
原文地址：https://www.cnblogs.com/xiaxinxin/p/9252126.html