<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="../libs/angular.min.js"></script>
<script src="../libs/jquery-3.2.1.min.js"></script>
<script>
var app = angular.module("myApp",[]);
app.controller("myCtrl",function($scope){
//初始化数据
$scope.goods=[{
"name":"罗马皮鞋",
"price":100,
"type":10,
"site":"河南"
},{
"name":"香奈儿",
"price":500,
"type":10,
"site":"河北"
},{
"name":"oppoR15",
"price":2599,
"type":10,
"site":"北京"
},{
"name":"vivoX20",
"price":3000,
"type":2,
"site":"上海"
}];
//加
$scope.jia=function(index){
$scope.goods[index].type++;
if($scope.goods[index].type>100){
alert("数量不能大于100");
$scope.goods[index].type=100;
}
}
//减
$scope.jian=function(index){
$scope.goods[index].type--;
if($scope.goods[index].type<0){
alert("数量不能低于0");
$scope.goods[index].type=0;
}
}
//判断
$scope.pan=function(index){
if($scope.goods[index].type >100 || $scope.goods[index].type < 0){
alert("数量必须在0~100之间")
}
}
//全选，反选
$scope.dis=function(){
for(var i = 0 ; i < $scope.goods.length ; i ++){
$scope.goods[i].ck=!$scope.goods[i].ck;
}
$scope.count();
}
//删除
$scope.del=function(index){
$scope.goods.splice(index,1);
}
//回显
$scope.update=function(x,index){
$scope.upd=true;
$scope.name=x.name;
$scope.price=x.price;
$scope.type=x.type;
$scope.site=x.site;
$scope.upda=$scope.goods[index];
}
//修改
$scope.qd=function(){
$scope.upda.name=$scope.name;
$scope.upda.price=$scope.price;
$scope.upda.type=$scope.type;
$scope.upda.site=$scope.site;
$scope.upd=false;
}
//批量删除
$scope.plsc=function(){
var d = false;
for(var i = 0 ; i < $scope.goods.length ; i ++ ){
if($scope.goods[i].ck==true){
d=true;
}
}
if(d){
for(var i = 0 ; i < $scope.goods.length ; i ++ ){
if($scope.goods[i].ck==true){
$scope.goods.splice(i,1);
i--;
}
}
}
}
//获取地址
$scope.pro=[{"pro":"南京"},{"pro":"深圳"},{"pro":"台湾"},{"pro":"南方"}];
//添加
$scope.add=function(){
$scope.tj=true;
}
$scope.insert=function(){
$("span").html("");
var iname=$scope.uname;
var iprice=$scope.uprice;
var itype=$scope.utype;
var isite=$scope.uaddress;
if(iname == undefined | iname== ""){
$("#sname").html("商品名称不能为空");
$("#sname").css("color","red");
return;
}
if(iprice == undefined | iprice== ""){
$("#sprice").html("商品价格不能为空");
$("#sprice").css("color","red");
return;
}
if(itype < 0 | itype > 100){
$("#stype").html("商品数量必须在0~100之间");
$("#stype").css("color","red");
return;
}
if(isite == undefined | isite== ""){
$("#saddress").html("商品地址不能为空");
$("#saddress").css("color","red");
return;
}
$scope.tian();
}
$scope.tian=function(){
$scope.goods.push({
"name":$scope.uname,
"price":$scope.uprice,
"type":$scope.utype,
"site":$scope.uaddress
})
$scope.tj=false;
}
//总价
$scope.count=function(){
$scope.gross=0;
for(var i = 0 ; i < $scope.goods.length ; i ++){
if($scope.goods[i].ck){
$scope.gross+=$scope.goods[i].price*$scope.goods[i].type;
}
}
}
//结算
$scope.account=function(){
for(var i = 0 ; i < $scope.goods.length ; i ++){
if($scope.goods[i].ck==true){
$scope.goods.splice(i,1);
i--;
}
}
alert("结算成功，一共消费"+$scope.gross+"元")
}
//选种变色
$scope.setColor=function(){
for(var i = 0 ; i < $scope.goods.length ; i ++){
if($scope.goods[i].ck==true){
$("table tr:eq("+(i+1)+")").removeClass()
$("table tr:eq("+(i+1)+")").css("background-color","greenyellow")
}else{
if (i%2==0){
$("table tr:eq("+(i+1)+")").css("background-color","#FFFF00")
} else{
$("table tr:eq("+(i+1)+")").css("background-color","#00FFFF")
}
}
}
}
})
</script>
</head>
<body ng-App="myApp" ng-controller="myCtrl">
<center>
<div>
<input type="text" placeholder="输入关键字..." ng-model="query" />
<select ng-model="orderKay">
<option value="">---排序---</option>
<option value="price">按价格正序</option>
<option value="-price">按价格倒序</option>
<option value="type">按数量正序</option>
<option value="-type">按数量倒序</option>
<option value="site">按地址正序</option>
<option value="-site">按地址倒序</option>
</select>
<input type="button" value="批量删除" ng-click="plsc()" />
<input type="button" value="添加" ng-click="add()" />
</div>
<div ng-show="tj">
商品名称:<input type="text" ng-model="uname" /><span id="sname"></span><br />
商品价格:<input type="text" ng-model="uprice" /><span id="sprice"></span><br />
商品数量:<input type="text" ng-model="utype" /><span id="stype"></span><br />
商品地址:
<select ng-model="uaddress">
<option value="">--请选择--</option>
<option ng-repeat="g in pro">{{g.pro}}</option>
</select><span id="saddress"></span>
<br />
<input type="button" value="确定" ng-click="insert()" />
</div>
<div ng-show="upd">
商品名称:<input type="text" ng-model="name" /><br />
商品价格:<input type="text" ng-model="price" /><br />
商品数量:<input type="text" ng-model="type" /><br />
商品地址:<input type="text" ng-model="site" /><br />
<input type="button" value="确定" ng-click="qd()" />
</div>
<table border="1px" cellspacing="2px" cellpadding="2px">
<tr bgcolor="#00BFFF">
<td><input type="checkbox" name="ckall" id="ckall" ng-click="dis()"/> </td>
<td>商品名称</td>
<td>商品价格</td>
<td>商品数量</td>
<td>商品地址</td>
<td>小计</td>
<td>操作</td>
</tr>
<tr ng-repeat="x in goods | filter : query | orderBy : orderKay" class="{{$index%2? 'ev':'od'}}">
<td><input type="checkbox" ng-model="x.ck" ng-click="count()" ng-style="setColor()"/> </td>
<td>{{x.name}}</td>
<td>{{x.price |currency:"￥:" }}</td>
<td>
<input type="button" value="+" ng-click="jia($index)" />
<input ng-model="x.type" ng-change="pan($index)"/>
<input type="button" value="-" ng-click="jian($index)"/>
</td>
<td>{{x.site}}</td>
<td>{{x.price*x.type |currency:"￥:"}}</td>
<td>
<input type="button" value="删除" ng-click="del($index)"/>
<input type="button" value="修改" ng-click="update(x,$index)"/>
</td>
</tr>
</table>
<h2>
您所选的总价￥:{{gross}}元
<input type="button" value="结算" ng-click="account()"/>
</h2>
</center>
</body>
</html>
315
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
