angularjs購物車功能（全）包含 （修改，添加等功能）
先上效果圖：
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%" border="3">
<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 一個多功能購物車就完成了