<head>
<meta charset="utf-8" />
<title></title>
</head>
<style>
.odiv {
width: 400px;
height: 300px;
background: #e5e5e5;
border: 1px solid #ccc;
margin: 0 auto;
}
.odiv p {
margin: 0 auto;
width: 200px;
height: 30px;
margin-top: 30px;
}
.odiv input {
width: 200px;
height: 30px;
margin: 0 auto;
}
.odiv button {
width: 200px;
height: 30px;
display: block;
margin: 0 auto;
margin-top: 30px;
}
</style>
<body ng-app="myApp" ng-controller="myCtrl">
<button ng-click="qx()">全选</button>
<button ng-click="qbx()">全不选</button>
<button ng-click="fx()">反选</button>
<button ng-click="clear()">清空购物车</button>
<button ng-click="pi()">批量删除</button>
<button ng-click="add()">添加</button>
<button ng-click="dx(type)">倒序</button>
<select ng-model="sss">
<option value="">--请选择--</option>
<option value="name">按名字正序</option>
<option value="-name">按名字倒序</option>
</select>
<input type="text" placeholder="请按照名字查找" ng-model="search" />
<!--<select>
<option ng-model="q">名字查找</option>
<option ng-model="a">数量</option>
</select>-->
<table border="1" width="100%">
<tr align="center">
<td>全选 </td>
<td>水果名字</td>
<td>价钱</td>
<td>数量</td>
<td>总价</td>
<td>操作</td>
</tr>
<tr ng-repeat="i in shuiguo|filter:{name:search}| orderBy:order+orderType |orderBy:sss" align="center">
<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="number" ng-model="i.number" />-->
<input type="button" value="+" ng-click="jia($index)" />
</td>
<td>{{i.price * i.number | currency:"￥"}}</td>
<td><input type="button" value="删除" ng-click="del($index)" />
<input type="button" value="修改" ng-click="xiugai($index)" />
</td>
</tr>
<tr>
<td colspan="6">总价：{{sum() |currency:"￥"}}</td>
</tr>
</table>
<!--添加模板-->
<div class="odiv" ng-show="add_show">
<p><input ng-model="names" type="text" placeholder="请输入名称" /></p>
<p><input ng-model="prices" type="number" placeholder="请输入价格" /></p>
<p><input ng-model="numbers" type="number" placeholder="请输入数量" /></p>
<button ng-click="true_add()"> 确认添加</button>
</div>
<!-- 修改模板-->
<div class="odiv" ng-show="xiu_show">
<p><input ng-model="prob.name" type="text" placeholder="请输入名称" /></p>
<p><input ng-model="prob.price" type="text" placeholder="请输入价格" /></p>
<p><input ng-model="prob.number" type="text" placeholder="请输入数量" /></p>
<button ng-click="true_add()"> 确认修改</button>
</div>
</body>
<script type="text/javascript" src="js/angular1.4.6.js"></script>
<script>
var vm = angular.module('myApp', [])
vm.controller('myCtrl', function($scope, $http) {
$http.get("cars.json").then(function(res) {
//获取数据 , 在json中 如果 中括号前有信息 就放在data 后面 ，如果没有 就不用放了
$scope.shuiguo = res.data
//全选：
$scope.qx = function() {
for(var i = 0; i < $scope.shuiguo.length; i++) {
var ck = $scope.shuiguo[i]
ck.ck = true
}
}
//全不选
$scope.qbx = function() {
for(var i = 0; i < $scope.shuiguo.length; i++) {
var ck = $scope.shuiguo[i]
ck.ck = false
}
}
//反选
$scope.fx = function() {
for(var i = 0; i < $scope.shuiguo.length; i++) {
var ck = $scope.shuiguo[i]
ck.ck = !ck.ck
}
}
//清空购物车
$scope.clear = function() {
$scope.shuiguo = []
alert("已清空")
}
//批量删除1
// $scope.pi=function(){
// var x=false
// for (var i=$scope.shuiguo.length-1 ;i>=0 ;i--) {
// var j=$scope.shuiguo[i]
// if (j.ck) {
// $scope.shuiguo.splice(i,1)
// x=true
// }
//
//
// }
// if(x==false){
// alert("请选中一个，再删除")
// }
//
//
// }
//批量删除2
$scope.pi = function() {
for(var i = 0; i < $scope.shuiguo.length; i++) {
if($scope.shuiguo[i].ck == true) {
$scope.shuiguo.splice(i, 1)
i--;
}
}
}
//倒序
$scope.order = ''
$scope.dx = function(type) {
$scope.orderType = type
if($scope.order == "") {
$scope.order = "-"
} else {
$scope.order = ""
}
}
// 删除
// $scope.del=function(name){
// for (var i=0 ;i<$scope.shuiguo.length ;i++) {
// var j=$scope.shuiguo[i]
// if (j.name==name) {
// $scope.shuiguo.splice(i,1)
// }
//
// }
//
// }
//删除2
$scope.del = function(index) {
$scope.shuiguo.splice(index, 1)
}
// 数量加减
//减
$scope.jian = function(index) {
if($scope.shuiguo[index].number > 1) {
$scope.shuiguo[index].number--
} else {
alert("不能在减了")
}
}
//加
$scope.jia = function(index) {
$scope.shuiguo[index].number++
}
//
// 总价格计算1
// $scope.sum=function(){
// var ss=0
// for (var i=0 ;i<$scope.shuiguo.length;i++) {
// var sum=$scope.shuiguo[i]
// var s=sum.price * sum.number
// ss+=s
//
// }
// return ss
//
//
// }
//总价格计算2
$scope.sum = function() {
var allPrice = 0
for(var i = 0; i < $scope.shuiguo.length; i++) {
allPrice += $scope.shuiguo[i].price * $scope.shuiguo[i].number
}
return allPrice
}
// 点击添加
$scope.add = function() {
$scope.add_show = true
}
$scope.true_add = function() {
var name2 = $scope.names
var price2 = $scope.prices
var number2 = $scope.numbers
// var shuiguo={
// name:name2,
// price:price2,
// number:number2
// }
//
// $scope.shuiguo.push(shuiguo)
$scope.shuiguo.push({
name: name2,
price: price2,
number: number2
})
$scope.names = ''
$scope.prices = ''
$scope.numbers = ''
$scope.add_show = false
}
// 点击修改
// 定义一个空对象
$scope.prob = {}
//定义一个索引
var idx = -1
// 点击修改按钮执行效果
$scope.xiugai = function($index) {
$scope.xiu_show = true
$scope.prob.name = $scope.shuiguo[$index].name
$scope.prob.price = $scope.shuiguo[$index].price
$scope.prob.number = $scope.shuiguo[$index].number
idx=$index
}
$scope.true_add=function(){
$scope.shuiguo[idx].name=$scope.prob.name
$scope.shuiguo[idx].price=$scope.prob.price
$scope.shuiguo[idx].number=$scope.prob.number
$scope.xiu_show=false
}
})
})
</script>
技能全
猜你喜欢
转载自blog.csdn.net/u010872950/article/details/83244418
今日推荐
周排行