先上效果圖:
css代碼較為簡單 這裡的css主要是為了修改模拟視窗,和添加資料模拟視窗:
.shop{
width: 500px;
height: 300px;
background: #E5E5E5;
margin: 0 auto;
}
.shop p{
width: 450px;
height: 30px;
margin: 0 auto;
margin-top: 20px;
}
.shop p input{
width: 300px;
height: 30px;
}
html代碼如下
<body ng-app="myApp" ng-controller="myCtrl">
<button ng-click="all()">全選</button>
<button ng-click="fx()">反選</button>
<button ng-click="qbx()">全不選</button>
<button ng-click="delAll()">清空購物車</button>
<button ng-click="dx(price)">價格倒序</button>
<button ng-click="pidel()">批量删除</button>
<button ng-click="fanc()">添加商品</button>
<input type="text" placeholder="查找商品" ng-model="search" />
<table width="100%" >
<tr>
<td></td>
<td>name</td>
<td>price</td>
<td>number</td>
<td>總價</td>
<td>删除</td>
</tr>
<tr ng-repeat="x in goods|orderBy:order+orderType | filter : {name:search}">
<td><input ng-model="x.ck" type="checkbox" /> </td>
<td>{{x.name}}</td>
<td>{{x.price | currency }}</td>
<td>
<button ng-click="jian($index)">-</button>
<input type="text" value="{{x.number}}" />
<button ng-click="jia($index)">+</button>
</td>
<td>{{x.price * x.number | currency}}</td>
<td><input ng-click="del($index)" type="button" value="删除" />
<input ng-click="xiu($index)" type="button" value="修改" />
</td>
</tr>
<tr>
<td>總價格 :<span ng-bind="allsum() | currency"></span></td>
</tr>
</table>
<!--添加資料相關-->
<div class="shop" ng-show="add_show">
<p>商品: <input ng-model="shops" type="text" placeholder="請輸入商品名字" /></p>
<p>價格:<input ng-model="prices" type="number" placeholder="請輸入商品價格" /></p>
<p>數量:<input ng-model="nums" type="number" placeholder="請輸入商品數量" /></p>
<p><button ng-click="trueAdd()">确認添加</button></p>
</div>
<!--修改相關-->
<div class="shop" ng-show="xiu_show">
<p>商品: <input ng-model="prod.name" type="text" placeholder="請輸入商品名字" /></p>
<p>價格:<input ng-model="prod.price" type="number" placeholder="請輸入商品價格" /></p>
<p>數量:<input ng-model="prod.number" type="number" placeholder="請輸入商品數量" /></p>
<p><button ng-click="save()">儲存資料</button></p>
</div>
</body>
js代碼如下:
var vm=angular.module("myApp" , [])
vm.controller("myCtrl",function($scope,$http){
$http.get("gouwucar.json").then(function(response){
$scope.goods=response.data
// 商品數量的加減
$scope.jian=function(index){
if ($scope.goods[index].number>1) {
$scope.goods[index].number--
} else {
$scope.goods[index].number =1
}
}
$scope.jia=function(index){
$scope.goods[index].number++
}
//删除條目
$scope.del=function(index){
if (confirm("确定删除")) {
$scope.goods.splice(index,1)
}
}
//總價格計算
$scope.allsum=function(){
var allPrice=0
for (var i=0 ; i<$scope.goods.length ; i++) {
allPrice+=$scope.goods[i].price * $scope.goods[i].number
}
return allPrice;
}
//全選
$scope.all=function(){
for (i=0 ; i<$scope.goods.length; i++) {
var x= $scope.goods[i]
if (x.ck==x.ck) {
x.ck=true
}
}
}
// 反選
$scope.fx=function(){
for(i=0 ; i<$scope.goods.length ; i++){
var x=$scope.goods[i]
if (x.ck==x.ck) {
x.ck = !x.ck
}
}
}
// 全不選
$scope.qbx=function(){
for (var i=0 ; i<$scope.goods.length ; i++) {
var x=$scope.goods[i]
if (x.ck==x.ck) {
x.ck=false
}
}
}
//清空購物車
$scope.delAll=function(){
if ($scope.goods.length == 0) {
alert("您的購物車已清空")
} else{
$scope.goods=[]
}
}
// 價格倒序
$scope.order=""
$scope.dx=function(type){
$scope.orderType=type
if ($scope.order=="") {
$scope.order="-"
} else{
$scope.order=""
}
}
// 批量删除
$scope.pidel=function(){
for (var i= 0 ;i<$scope.goods.length ; i++) {
if ($scope.goods[i].ck==true) {
$scope.goods.splice(i,1)
i--;
}
}
}
//添加
//點選添加按鈕彈出添加框
$scope.fanc=function(){
$scope.add_show=true
}
//點選确認添加按鈕
$scope.trueAdd=function(){
//擷取輸入框中的内容
var shop=$scope.shops
var prices=$scope.prices
var num =$scope.nums
//資料添加
$scope.goods.push({
name:shop,
price:prices,
number:num
})
//清空輸入的資料
$scope.shops=""
$scope.prices=""
$scope.nums=""
}
//資料修改
//定義一個空對象 , 用于更新和儲存資料時臨時存儲
$scope.prod = {};
// 定義一個索引值
var idx=-1
//定義一個點選按鈕時觸發的事件,用于單擊後彈出子產品視窗用于修改資料
$scope.xiu=function($index){
//顯示視窗
$scope.xiu_show=true
//将選中行的資料綁定到臨時對象prod中,在下面的模态視窗中展示出來
$scope.prod.name=$scope.goods[$index].name
$scope.prod.price=$scope.goods[$index].price
$scope.prod.number=$scope.goods[$index].number
//選中行的索引指派給全局變量idx
idx=$index
}
//定義一個單機儲存按鈕時觸發的事件,
$scope.save=function(){
//将修改後的值賦給數組
$scope.goods[idx].name=$scope.prod.name
$scope.goods[idx].price=$scope.prod.price
$scope.goods[idx].number=$scope.prod.number
//關閉視窗
$scope.xiu_show=false
}
})
})
json資料如下
[
{"name":"小米","price":12,"number":2},
{"name":"大米","price":23,"number":1},
{"name":"黑米","price":24,"number":1},
{"name":"糯米","price":18,"number":5}
]
```
ok 一個多功能購物車就完成了