核心提示：angular购物车效果实现代码!DOCTYPE htmlhtml ng-app=App head meta charset=UTF-8 title/title style .css1{...
angular购物车效果实现代码
<!DOCTYPE html>
<html ng-app="App">
<head>
<meta charset="UTF-8">
<title></title>
<style>
.css1{
background-color: red;
}
.css2{
background-color: brown;
}
</style>
</head>
<body ng-controller="Demo">
<input type="text" placeholder="请输入查询商品" ng-model="search" />
数量排序:
<select ng-model="selOrder">
<option value="nums">数量正序</option>
<option value="-nums">数量倒序</option>
</select>
<button ng-click="delSelect()" class="sb">批量删除</button><br />
<table border="2px" cellspacing="0">
<tr>
<!--<td><input type="checkbox" ng-model="selectAll" ng-click="selectAllFun()"/></td>-->
<td><input type="checkbox" ng-model="selectAll" ng-click="selectAllFun()" /></td>
<td>产品编号</td>
<td>产品名称</td>
<td>购买数量</td>
<td>产品单价</td>
<td>产品总价</td>
<td>操作</td>
</tr>
<tr ng-repeat="x in datas | filter:{name:search}| orderBy:selOrder" class="{{ $even ? 'css1':'css2'}}">
<td><input type="checkbox" ng-model="x.state"/></td>
<td>{{x.id}}</td>
<td>{{x.name}}</td>
<td>
<button ng-click="jian($index)">-</button>
<input type="number" ng-model="x.nums"/>
<button ng-click="add($index)">+</button>
</td>
<td>{{x.prices}}</td>
<td>{{x.prices*x.nums}}</td>
<td><button ng-click="remove($index)">移除</button>
<button ng-click="updateShowFun($index)">修改</button>
</td>
</tr>
</table>
<p>
<span>总价</span>
<span>{{totalPrice()}}</h3>
<span>总数</h3>
<span>{{totalNum()}}</h3>
<button ng-click="removeAll()">清空购物车</button>
</p>
<form style="border: 1px solid yellow; width: 260px;">
商品编号:<input type="text" ng-model="ID"/><br />
商品名称:<input type="text" ng-model="IDname"/><br />
商品数量:<input type="number" ng-model="IDnum"/><br />
商品单价:<input type="text" ng-model="IDprice"/><br />
<button ng-click="add333()">添加</button>
</form>
<form style="border: solid black; width: 300px;" ng-show="updateShow">
商品编号:<input type="text" ng-model="updateId"/><br />
商品名称:<input type="text" ng-model="updateName"/><br />
商品数量:<input type="number" ng-model="updateNum"/><br />
商品单价:<input type="number" ng-model="updatePrice"/><br />
<button type="button" value="提交" ng-click="updateSub()">提交</button>
</form>
<script type="text/javascript" src="js/angular.js" ></script>
<script>
var App = angular.module("App",[]);
App.controller("Demo",function($scope){
//数据
$scope.datas = [
{
id:1001,
name:"ihone8",
nums:1,
prices:3888,
state: false
}
,
{
id:1002,
name:"ihone10",
nums:1,
prices:6888,
state: false
}
,
{
id:1003,
name:"ihone7",
nums:1,
prices:5888,
state: false
}
];
//数量减减
$scope.jian = function(index){
$scope.datas[index].nums--;
}
//数量加加
$scope.add = function(index){
$scope.datas[index].nums++;
}
//移除的
$scope.remove = function(index){
if(confirm("确定要移除吗?")){
$scope.datas.splice(index,1);
}
}
//全选和反选
$scope.selectAllFun = function(){
if($scope.selectAll){
//如果是true的话，把下面的都选中
for (var x=0;x<$scope.datas.length;x++) {
$scope.datas[x].state = true;
}
}else{ //全部不选中
for (var x=0;x<$scope.datas.length;x++) {
$scope.datas[x].state = false;
}
}
}
//批量删除 名字进行删除
$scope.delSelect = function(){
var arrs =[];
for (var x=0;x<$scope.datas.length;x++) {
if($scope.datas[x].state){
arrs.push($scope.datas[x].name);
}
}
if(arrs.length<=0){
alert("请您选中你要删除的数据")
}else{
//开始进行删除
for (var x=0;x<arrs.length;x++) {
for (var x2=0;x2<$scope.datas.length;x2++) {
if(arrs[x]==$scope.datas[x2].name){
//删除
$scope.datas.splice(x2,1);
}
}
}
}
}
//总价
$scope.totalPrice = function(){
var totalPrice=0;
for (var x=0;x<$scope.datas.length;x++) {
totalPrice+=$scope.datas[x].prices *$scope.datas[x].nums;
}
return totalPrice;
}
//总数
$scope.totalNum = function(){
var totalNums=0;
for (var x=0;x<$scope.datas.length;x++) {
totalNums+=$scope.datas[x].nums;
}
return totalNums;
}
//清空购物车
$scope.removeAll = function(){
$scope.datas =[];
}
//增加数据的方法
$scope.add333 = function(){
/*ng-model="ID"/><br />
商品名称:<input type="text" ng-model="IDname"/><br />
商品数量:<input type="text" ng-model="IDnum"/><br />
商品单价:<input type="text" ng-model="IDprice"*/
var flag1 = false;
if($scope.ID=="" || $scope.ID==null){
flag1 = false;
alert("ID不能为空")
return;
}else if(isNaN($scope.ID)){ //如果传入的参数是非数字返回true,如果是数字返回false
flag1 = false;
alert("ID必须是数字")
return;
}else{
flag1 = true;
}
if($scope.IDname=="" || $scope.IDname==null){
flag1 = false;
alert("IDname不能为空")
return;
}else{
flag1 = true;
}
if($scope.IDnum=="" || $scope.IDnum==null){
flag1 = false;
alert("IDnum不能为空")
return;
}else if(isNaN($scope.IDnum)){ //如果传入的参数是非数字返回true,如果是数字返回false
flag1 = false;
alert("IDnum必须是数字")
return;
}else{
flag1 = true;
}
if($scope.IDprice=="" || $scope.IDprice==null){
flag1 = false;
alert("IDnum不能为空")
return;
}else if(isNaN($scope.IDprice)){ //如果传入的参数是非数字返回true,如果是数字返回false
flag1 = false;
alert("IDnum必须是数字")
return;
}else{
flag1 = true;
}
if(flag1){
//添加数据到原始的集合里面
$scope.datas.push({
id:$scope.ID,
name:$scope.IDname,
nums:$scope.IDnum,
prices:$scope.IDprice,
});
}
}
var index333 = 0;
//修改的
$scope.updateShowFun = function(index){
index333=index;
if(confirm("确定要修改吗")){
$scope.updateShow = true;
}
}
//提交按钮
$scope.updateSub = function(){
$scope.datas[index333].id = $scope.updateId;
$scope.datas[index333].name = $scope.updateName;
$scope.datas[index333].nums= $scope.updateNum;
$scope.datas[index333].prices = $scope.updatePrice;
/*for (var x=0;x<$scope.datas.length;x++) {
$scope.datas.[index333]
if($scope.datas[x].id==$scope.updateId){
$scope.datas[x].id = $scope.updateId;
$scope.datas[x].name = $scope.updateName;
$scope.datas[x].nums= $scope.updateNum;
$scope.datas[x].prices = $scope.updatePrice;
}
}*/
}
});
</script>
</body>
</html>
\\\\\
