<!DOCTYPE html>
<html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
/*隔行变色(实现)*/
.css1 {
background-color: antiquewhite;
}
.css2 {
background-color: burlywood;
}
/*按钮变小手*/
.sb {
cursor: pointer;
}
</style>
<script src="../libs/angular.js"></script>
<script src="../libs/jquery-1.11.0.min.js"></script>
<script>
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) { //初始数据
$scope.shops = [{
name: "小米",
pass: 223,
shuliang: 3,
danjia: 3000
}, {
name: "外星人",
pass: 22554,
shuliang: 5,
danjia: 12000
}, {
name: "三星",
pass: 2255,
shuliang: 4,
danjia: 2000
}]; //全选、全不选
$scope.selectAll = false;
$scope.selectAllFun = function() {
if($scope.selectAll) {
for(index in $scope.shops) {
$scope.shops[index].state = true;
}
} else {
for(index in $scope.shops) {
$scope.shops[index].state = false;
}
}
} //反选
$scope.checkSelAll = function() {
var flag = false;
for(index in $scope.shops) {
if(!$scope.shops[index].state) { //满足条件
flag = true;
}
}
if(flag) {
$scope.selectAll = false;
} else {
$scope.selectAll = true;
}
}
//下拉菜单排序
$scope.orderSel = ""; //批量删除
$scope.delSelect = function() {
var selArr = [];
for(index in $scope.shops) {
if($scope.shops[index].state) {
selArr.push($scope.shops[index].name)
}
}
if(selArr.length <= 0) {
alert("请先选择");
} else {
if(window.confirm("确定要删除吗?")) {
for(index1 in selArr) {
for(index2 in $scope.shops) {
if(selArr[index1] == $scope.shops[index2].name) {
$scope.shops.splice(index2, 1);
}
}
}
} else { }
}
} //删除
$scope.remove = function(index) {
if(confirm("删除吗?")) {
$scope.shops.splice(index, 1);
}
} //添加商品
$scope.isShow = false;
$scope.isShow2 = false;
$scope.showForm = function() {
if($scope.isShow) {
$scope.isShow = false;
} else {
$scope.isShow = true;
}
} //判断名称是否重复
$scope.submit = function() {
for(index in $scope.shops) {
if($scope.shops[index].name == $scope.newname) {
alert("产品名称不能重复");
$scope.errorArr.push("产品名称不能重复");
} else if($scope.newname == "" || $scope.newname == null) {
alert("产品名称不能为空");
$scope.errorArr.push("产品名称不能为空");
}
}
// if($scope.errorArr.length > 0) {
// //显示列表
// $scope.isShow2 = true;
// } else {
// $scope.isShow2 = false;
//添加数据
var newShop = {
pass: $scope.newpass,
name: $scope.newname,
shuliang: $scope.newnum,
danjia: $scope.newprice
};
$scope.shops.push(newShop);
$scope.isShow = false; //}
} //总价
$scope.totalPrice = function() {
var totalPrice = 0;
for(var x = 0; x < $scope.shops.length; x++) {
totalPrice += $scope.shops[x].shuliang * $scope.shops[x].danjia;
}
return totalPrice;
}; //总数
$scope.totalNum = function() {
var nums = 0;
for(var x = 0; x < $scope.shops.length; x++) {
nums += $scope.shops[x].shuliang;
}
return nums;
}; //对数量进行减减
$scope.jian = function(index) { //alert(index);
if($scope.shops[index].shuliang > 1) { //数量是大小等 于1的
$scope.shops[index].shuliang--;
} else {
if(confirm("删除吗?")) {
$scope.shops.splice(index, 1);
} //alert("数量不能为负数");
}
} //加加的
$scope.add = function(index) { //alert(index);
$scope.shops[index].shuliang++;
}
//修改数据
$scope.updateShowFun = function(shop) {
$scope.updateId = shop.pass;
$scope.updateName = shop.name;
$scope.updateTel = shop.shuliang;
$scope.updateHobby = shop.danjia;
}
$scope.updateData = function() {
$scope.updateArr = [];
for(index in $scope.shops) {
if(parseInt($scope.updateId) == $scope.shops[index].pass) {
$scope.shops[index].name = $scope.updateName;
$scope.shops[index].shuliang = $scope.updateTel;
$scope.shops[index].danjia = $scope.updateHobby;
}
}
}
// //修改价格
// $scope.update = function(shop){
// var newPrice = window.prompt("请输入要修改的"+shop.name+"商品的价格",shop.danjia);
// if(newPrice == null || newPrice == ""){
// alert("商品价格不能为空")
// }else if(isNaN(newPrice)){
// alert("商品价格必须是数字")
// }else{
// shop.danjia = parseInt(newPrice);
// }
// }
// <button ng-click="update(shop)" class="sb">修改价格</button>
// //搜索
// $scope.sousuo = function() {
//
// }
});
</script>
</head>
<body ng-app="myApp" ng-controller="myCtrl">
<input type="text" ng-model="search" placeholder="商品名称" />
<select ng-model="orderSel">
<option value="">--请选择--</option>
<option value="pass">--id正序--</option>
<option value="-pass">--id逆序--</option>
<option value="danjia">--价格正序--</option>
<option value="-danjia">--价格逆序--</option>
</select>
<table border="1px solid blue;" cellpadding="10" cellspacing="0">
<thead>
<tr>
<th><input type="checkbox" ng-model="selectAll" ng-click="selectAllFun()" /> </th>
<th>产品名称</th>
<th>产品号</th>
<th>产品数量</th>
<th>产品单价</th>
<th>产品小计</th>
<th><button ng-click="delSelect()" class="sb">批量删除</button></th>
</tr>
</thead>
<tbody>
<tr ng-repeat="shop in shops | filter:{name:search} | orderBy:orderSel" class="{{ $even ? 'css1':'css2'}}">
<td><input type="checkbox" ng-model="shop.state" ng-click="checkSelAll()" /></td>
<td>{{shop.name}}</td>
<td>{{shop.pass}}</td>
<td>
<button ng-click="jian($index)" class="sb">-</button>
<input type="text" ng-model="shop.shuliang" />
<button ng-click="add($index)" class="sb">+</button> </td>
<td>{{shop.danjia}}</td>
<td>{{shop.shuliang*shop.danjia}}</td>
<td><button ng-click="remove($index)" class="sb">删除</button>
<button style="color: red; text-decoration: underline; border: none;" ng-click="updateShowFun(shop)">修改</button> </td>
</tr>
</tbody>
</table>
<div>
<h3>总价:{{totalPrice()}}</h3>
<h3>总数:{{totalNum()}}</h3>
</div>
<form style="border: 1px solid black; width: 600px;">
<h3>修改用户</h3> id:
<input type="text" placeholder="请输入新修改id" ng-model="updateId" disabled="disabled" /><br /><br /> 姓名:
<input type="text" placeholder="请输入新修改姓名" ng-model="updateName" /><br /><br /> 数量:
<input type="text" placeholder="请输入新修改数量" ng-model="updateTel" /><br /><br /> 单价:
<input type="text" placeholder="请输入新修改单价" ng-model="updateHobby" /><br /><br />
<input type="button" value="修改" ng-click="updateData()" />
<input type="reset" value="清空" /><br />
</form>
<button ng-click="showForm()" class="sb">添加商品</button><br /><br />
<fieldset ng-show="isShow" id="" style="width: 400px;">
<legend>添加商品</legend><br />
<form>
姓名:<input type="text" placeholder="请输入" ng-model="newname" /><br /> 密码:<input type="text" placeholder="请输入" ng-model="newpass" /><br /> 数量:<input type="number" placeholder="请输入" ng-model="newnum" /><br /> 单价:<input type="text" placeholder="请输入" ng-model="newprice" /><br />
<!--<button ng-click="submit()">点击添加</button><br /><br />-->
<ul ng-show="isShow2" style="width: 200px; background-color: #f89;">
<li ng-repeat="error in errorArr">{{error}}</li>
</ul>
<input ng-click="submit()" type="button" value="添加" class="sb" />
</form>
<h3>修改用户</h3> id:
<input type="text" placeholder="请输入新修改id" ng-model="updateId" disabled="disabled" /><br /><br /> 姓名:
<input type="text" placeholder="请输入新修改姓名" ng-model="updateName" /><br /><br /> 数量:
<input type="text" placeholder="请输入新修改数量" ng-model="updateTel" /><br /><br /> 单价:
<input type="text" placeholder="请输入新修改单价" ng-model="updateHobby" /><br /><br />
<input type="button" value="修改" ng-click="updateData()" />
<input type="reset" value="清空" /><br />
</form>
<button ng-click="showForm()" class="sb">添加商品</button><br /><br />
<fieldset ng-show="isShow" id="" style="width: 400px;">
<legend>添加商品</legend><br />
<form>
姓名:<input type="text" placeholder="请输入" ng-model="newname" /><br /> 密码:<input type="text" placeholder="请输入" ng-model="newpass" /><br /> 数量:<input type="number" placeholder="请输入" ng-model="newnum" /><br /> 单价:<input type="text" placeholder="请输入" ng-model="newprice" /><br />
<!--<button ng-click="submit()">点击添加</button><br /><br />-->
<ul ng-show="isShow2" style="width: 200px; background-color: #f89;">
<li ng-repeat="error in errorArr">{{error}}</li>
</ul>
<input ng-click="submit()" type="button" value="添加" class="sb" />
</form>
</fieldset>
</body>
</body>
</html>