angular结尾-弹框购买修改案例

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="js/angular.min.js" ></script>
<script>
angular.module("myapp",[]).controller("myctrl",function ($scope) {
$scope.goods=[{
name:"iPhone",
price:8300,
num:30,
type:200,
},{
name:"iPhone 6s",
price:5400,
num:30,
type:200,
},{
name:"iPhone 7Plus",
price:6600,
num:30,
type:200,
},{
name:"iPad",
price:3500,
num:3,
type:200,
},]
//全选，全不选
$scope.ck=function () {
var qx=$scope.qx;
for (var i = 0 ; i<$scope.goods.length;i++) {
$scope.goods[i].checked=qx;
}
}
//删除,批量删除
$scope.delAll=function () {
var ids=false;
for (var i = 0 ; i<$scope.goods.length;i++) {
if ($scope.goods[i].checked==true) {
ids=true;
}
}
if (ids==""){
alert("请选择要删除的商品！");
}else{
for (var i = 0 ; i<$scope.goods.length;i++) {
if ($scope.goods[i].checked==true) {
$scope.goods.splice(i,1);
i--;
}
}
}
}
//购买
$scope.buy=function (index) {
$scope.num = $scope.goods[index].num;
$scope.type = $scope.goods[index].type;
$scope.goods[index].num = $scope.num-1;
$scope.goods[index].type = $scope.type+1;
if ($scope.goods[index].num<0) {
alert("库存不足！！！");
$scope.goods[index].num = $scope.num;
$scope.goods[index].type = $scope.type;
}
}
//修改
$scope.upd=function (index) {
$scope.price = $scope.goods[index].price;
$scope.price1 = prompt("请输入修改的商品价格：",$scope.price);
$scope.goods[index].price = $scope.price1;
}
//添加
$scope.flag=false;
$scope.save=function () {
//获取值
var name1 = $scope.name1;
var price1 = $scope.price1;
var num1 = $scope.num1;
var type1 = $scope.type1;
//将String转换为int类型
var num2 =parseInt(num1);
var type2 =parseInt(type1);
//添加
$scope.goods.push({
name:name1,
price:price1,
num:num1,
type:type2
})
$scope.flag=false;
}
});
</script>
</head>
<body ng-app="myapp" ng-controller="myctrl">
<div style="width: 700px;">
<input type="text" ng-model="plname" placeholder="请输入关键字" />
<button ng-click="flag=true">添加商品</button>
<button ng-click="delAll()" style="float: right;">删除/批量删除</button>
</div>
<table border="1" cellpadding="0" cellspacing="0" style="width: 700px;">
<tr align="center">
<td><input type="checkbox" ng-model="qx" ng-change="ck()"></td>
<td>商品名称</td>
<td>商品价格<button ng-click="px='price';sj=!sj">排序</button></td>
<td>商品库存<button ng-click="px='num';sj=!sj">排序</button></td>
<td>商品销量<button ng-click="px='type';sj=!sj">排序</button></td>
<td>操作</td>
</tr>
<tr ng-repeat="s in goods|filter:{name:plname}|orderBy:px:sj" align="center">
<td><input type="checkbox" ng-model="s.checked"></td>
<td>{{s.name}}</td>
<td>{{s.price|currency:"$:"}}</td>
<td>{{s.num}}</td>
<td>{{s.type}}</td>
<td>
<button ng-click="buy($index)">购买</button> |
<button ng-click="upd($index)">修改</button>
</td>
</tr>
</table>
<form ng-show="flag">
商品名称:<input type="text" ng-model="name1" /><br />
商品价格:<input type="text" ng-model="price1" /><br />
商品库存:<input type="text" ng-model="num1" /><br />
商品销量:<input type="text" ng-model="type1" /><br />
<button ng-click="save()">添加</button>
</form>
</body>
</html>

angular结尾-弹框购买修改案例

猜你喜欢