<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
tbody tr:nth-child(even)
{
background: #FFFF80;
}
tbody tr:nth-child(odd)
{
background: #80FF80;
}
tbody tr:hover{
background: #80FFFF;
}
</style>
<script type="text/javascript" src="../bao/angular.js" ></script>
<script>
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
$scope.products = [{
"id": 80,
"name": "iPhone",
"price": 5400,
done:false
}, {
"id": 1200,
"name": "ipad mini",
"price": 2200,
done:false
}, {
"id": 500,
"name": "ipad air",
"price": 2340,
done:false
}, {
"id": 290,
"name": "ipad",
"price": 1420,
done:false
}, {
"id": 910,
"name": "imac",
"price": 15400,
done:false
}];
//篩選年齡
$scope.pricefw="--請選擇--";
$scope.xuzhe=function(price)
{
if($scope.pricefw=="--請選擇--")
{
return true;
}else{
var arr=$scope.pricefw.split("-");
var minprice=arr[0];
var maxprice=arr[1];
if(price<minprice||price>maxprice)
{
return false;
}else{
return true;
}
}
}
//全選全不選
$scope.allcheck=false;
$scope.allselect=function()
{
if($scope.allcheck)
{
for(index in $scope.products)
{
$scope.products[index].done=true;
}
}else{
for(index in $scope.products)
{
$scope.products[index].done=false;
}
}
}
//反選
$scope.xuzedan=function()
{
var flag=false;
for(index in $scope.products)
{
if(!$scope.products[index].done)
{
flag=true;
}
}
if(flag)
{
$scope.allcheck=false;
}else{
$scope.allcheck=true;
}
}
//批量刪除
$scope.plsc=function()
{
if(confirm("你確定批量刪除嗎?"))
{
var namearr=[];
for(index in $scope.products)
{
if($scope.products[index].done){
namearr.push($scope.products[index].name);
}
}
}
if(namearr.length<=0)
{
alert("沒有選中項");
}else{
for(index in namearr){
var names=namearr[index];
for(index2 in $scope.products){
if(names==$scope.products[index2].name){
$scope.products.splice(index2,1);
alert("刪除成功");
}
}
}
}
}
//單個刪除
$scope.delone=function(name)
{
if(confirm("你確定刪除嗎?"))
{
var namearr2=[];
for(index in $scope.products)
{
if(name==$scope.products[index].name){
namearr2.push($scope.products[index].name);
}
}
}
if(namearr2.length>=0)
{
for(index in namearr2){
var namess=namearr2[index];
for(index2 in $scope.products){
if(namess==$scope.products[index2].name){
$scope.products.splice(index2,1);
alert("刪除成功");
}
}
}
}
}
//顯示添加商品表
$scope.isgoods=false;
$scope.showadd=function()
{
if($scope.isgoods)
{
$scope.isgoods=false;
}else{
$scope.isgoods=true;
$scope.isxiugai=false;
}
}
//添加提交驗證
$scope.addId="";
$scope.addName="";
$scope.addPrice="";
$scope.isul=false;
$scope.addtj=function()
{
$scope.addyz=[];
if($scope.addId==""||$scope.addId==null)
{
$scope.addyz.push("產品編號不能爲空");
}else if(isNaN($scope.addId)){
$scope.addyz.push("產品編號不是整數");
}
if($scope.addName==""||$scope.addName==null)
{
$scope.addyz.push("產品名字不能爲空");
}
if($scope.addPrice==""||$scope.addPrice==null)
{
$scope.addyz.push("產品價格不能爲空");
}else if(isNaN($scope.addPrice)){
$scope.addyz.push("產品價格不是整數");
}
if($scope.addyz.length>0)
{
$scope.isul=true;
}else{
var newgoods={
id: parseInt($scope.addId),
name: $scope.addName,
price: parseInt($scope.addPrice),
done:false
};
$scope.products.push(newgoods);
}
}
//顯示修改表
$scope.updateId="";
$scope.updateName="";
$scope.updatePrice="";
$scope.isxiugai=false;
$scope.xiugai=function(pro)
{
if($scope.isxiugai)
{
$scope.isxiugai=false;
}else{
$scope.updateId=pro.id;
$scope.updateName=pro.name;
$scope.updatePrice=pro.price;
$scope.isxiugai=true;
$scope.isgoods=false;
}
}
//修改提交驗證
$scope.isul2=false;
$scope.updatetj=function()
{
$scope.updateyz=[];
if($scope.updateName==""||$scope.updateName==null)
{
$scope.updateyz.push("修改名字不能爲空");
}
if($scope.updatePrice==""||$scope.updatePrice==null)
{
$scope.updateyz.push("修改價格不能爲空");
}else if(isNaN($scope.updatePrice)){
$scope.updateyz.push("修改價格不是整數");
}
if($scope.updateyz.length>0)
{
$scope.isul2=true;
}else{
$scope.isul2=false;
for(index in $scope.products)
{
if($scope.updateId==$scope.products[index].id)
{
$scope.products[index].name=$scope.updateName;
$scope.products[index].price=$scope.updatePrice;
$scope.isxiugai=false;
}
}
}
}
});
</script>
</head>
<body ng-app="myApp" ng-controller="myCtrl">
<center>
<h3>購物車</h3>
<input type="text" placeholder="產品名稱" ng-model="namegjz" /> 產品價格
<select ng-model="pricefw">
<option>--請選擇--</option>
<option>0-2000</option>
<option>2001-3000</option>
<option>3001-4000</option>
<option>4001-5000</option>
<option>5001-6000</option>
<option>6001-7000</option>
<option>7001-8000</option>
<option>8001-無窮大</option>
</select>
<select ng-model="pxfs">
<option value="">排序方式</option>
<option value="id">id正序</option>
<option value="-id">id逆序</option>
<option value="price">價格正序</option>
<option value="-price">價格逆序</option>
</select>
<button ng-click="plsc()">批量刪除</button>
<br /><br />
<table border="1px solid blue" cellpadding="10" cellspacing="0">
<thead>
<tr style="background:#FF8080 ;">
<td><input type="checkbox" ng-model="allcheck" ng-click="allselect()"/></td>
<td>產品編號</td>
<td>產品名稱</td>
<td>產品價格</td>
<td>操作</td>
</tr>
</thead>
<tbody>
<tr ng-repeat="sz in products|filter:{'name':namegjz}|orderBy:pxfs" ng-show="xuzhe(sz.price)">
<td><input type="checkbox" ng-model="sz.done" ng-click="xuzedan()"/></td>
<td>{{sz.id}}</td>
<td>{{sz.name}}</td>
<td>{{sz.price}}</td>
<td><button ng-click="delone(sz.name)" >刪除</button><button ng-click="xiugai(sz)" >修改</button></td>
</tr>
</tbody>
</table><br/>
<button ng-click="showadd()">添加商品信息</button><br/>
<br/>
<div style="width:300px;border:1px solid blue" ng-show="isgoods">
<h3>添加商品</h3>
商品編號:<input type="text" placeholder="商品編號" ng-model="addId"/><br/><br/>
商品名稱:<input type="text" placeholder="商品名稱" ng-model="addName"/><br/><br/>
商品價格:<input type="text" placeholder="商品價格" ng-model="addPrice"/><br/><br/>
<ul style="background:#FFFF80" ng-show="isul">
<li ng-repeat="yz in addyz">{{yz}}</li>
</ul>
<input type="button" value="提交" ng-click="addtj()" />
</div>
<div style="width:300px;border:1px solid blue" ng-show="isxiugai">
<h3>修改商品</h3>
商品編號:<input type="text" placeholder="" ng-model="updateId" disabled="disabled"/><br/><br/>
修改名稱:<input type="text" placeholder="" ng-model="updateName"/><br/><br/>
修改價格:<input type="text" placeholder="" ng-model="updatePrice"/><br/><br/>
<ul style="background:#FFFF80" ng-show="isul2">
<li ng-repeat="xgyz in updateyz">{{xgyz}}</li>
</ul>
<input type="button" value="確定修改" ng-click="updatetj()" />
</div>
</center>
</body>
</html>購物車（angularjs）
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章