<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript" src="js/angular1.4.6.js"></script>
<style>
.jia{
width: 300px;
height: 300px;
background:#e5e5e5;
border: 1px solid #E5E5E5;
}
</style>
</head>
<body ng-app="myApp" ng-controller="myCtrl">
<button ng-click="plsc()">批量删除</button>
<button ng-click="qk()">清空购物车</button>
<button ng-click="tj()">添加</button>
<button ng-click="dx(type)">倒序</button>
<input type="text" placeholder="按名字查询" ng-model="search"/>
<table border="1px" cellspacing="1px">
<tr>
<td><input type="checkbox" ng-click="ckx()"></td>
<td>name</td>
<td>price</td>
<td>number</td>
<td>totalprice</td>
<td>option</td>
<td>操作</td>
</tr>
<tr ng-repeat="i in gouwucar|filter:{name:search}| orderBy:order+orderType |orderBy:sss">
<td><input type="checkbox" ng-model="i.ck" ></td>
<td>{{i.name}}</td>
<td>{{i.price | currency:"￥"}}</td>
<td>
<input type="button" value="-" ng-click="jian($index)"/>
<input type="text" disabled="disabled" value="{{i.number}}" style="text-align: center;"/>
<input type="button" value="+" ng-click="jia($index)"/>
</td>
<td>{{i.price * i.number | currency:"￥"}}</td>
<td></td>
<td>
<input type="button" value="删除" ng-click="del($index)"/>
<input type="button" value="修改" ng-click="xg($index)"/>
</td>
</tr>
<tr><td colspan="7">总价:{{sum() | currency:"￥"}}</td></tr>
</table>
<div class="jia" ng-show="xs">
<p><input type="text" ng-model="names" placeholder="输入名称"></p>
<p><input type="text" ng-model="prices" placeholder="输入价格"></p>
<p><input type="text" ng-model="numbers" placeholder="输入数量"></p>
<button ng-click="qr()">确认添加</button>
</div>
<div class="gei" ng-show="xiu_show">
<p><input type="text" ng-model="prob.name" placeholder="输入名称"></p>
<p><input type="text" ng-model="prob.price" placeholder="输入价格"></p>
<p><input type="text" ng-model="prob.number" placeholder="输入数量"></p>
<button ng-click="true_add()">确认修改</button>
</div>
</body>
<script>
var vm = angular.module('myApp',[])
vm.controller('myCtrl',function($scope,$http){
$http.get("gouwucar.json").then(function(res){
$scope.gouwucar=res.data
$scope.qk = function(){
$scope.gouwucar = []
alert("已清空")
}
//批量删除
$scope.plsc = function(){
for( var i=0;i< $scope.gouwucar.length;i++){
if($scope.gouwucar[i].ck==true){
$scope.gouwucar.splice(i,1)
i--;
}
}
alert("请选中在添加")
}
//选
$scope.ckx = function(){
for (var i=0; i<$scope.gouwucar.length;i++) {
var ck = $scope.gouwucar[i]
ck.ck = !ck.ck
}
}
//排序
$scope.order = ''
$scope.dx = function(type){
$scope.orderType = type
if($scope.order ==""){
$scope.order = "-"
}else{
$scope.order=""
}
}
//删除
$scope.del = function(index){
$scope.gouwucar.splice(index,1)
alert("确认删除")
}
//减
$scope.jian = function(index){
if($scope.gouwucar[index].number>1){
$scope.gouwucar[index].number--
}else{
alert("已经是最后底线了，亲")
}
}
//加
$scope.jia = function(index){
$scope.gouwucar[index].number++
}
$scope.tj =function (){
$scope.xs = true;
}
$scope.qr = function(){
var name1 = $scope.names;
var price1 = $scope.prices;
var number1 = $scope.numbers;
$scope.gouwucar.push({
name:name1,
price:price1,
number:number1,
})
$scope.names=''
$scope.prices=''
$scope.numbers=''
$scope.xs=false
}
$scope.prob = {}
var idx = -1
$scope.xg = function($index) {
$scope.xiu_show = true
$scope.prob.name = $scope.gouwucar[$index] .name
$scope.prob.price = $scope.gouwucar[$index].price
$scope.prob.number = $scope.gouwucar[$index].number
idx=$index
}
$scope.true_add=function(){
$scope.gouwucar[idx].name=$scope.prob.name
$scope.gouwucar[idx].price=$scope.prob.price
$scope.gouwucar[idx].number=$scope.prob.number
$scope.xiu_show=false
}
$scope.sum = function(){
var allprice = 0
for(var i = 0; i<$scope.gouwucar.length;i++){
allprice += $scope.gouwucar[i].price * $scope.gouwucar[i].number
}
return allprice
}
})
})
</script>
</html>
9406
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
