Angularjsでショッピングカート機能を実装する例コード

angularJS初学者　暇な時間に小さな例を作成しました。

機能：カートの商品の価格を計算し、カートの商品を削除します。

以下は完全な例（jQueryおよびangularjsは自分でインクルードする必要があります）

!doctype html>
<html ng-app="myApp">
<head>
<meta charset="utf-8">
<title>無題文書</title>
<style>
.cursors{cursor:pointer}
</style>
<script src="js/jquery-1.11.1.js"></script>
<script src="js/angular.min.js"></script>
<script>
var A=angular.module('myApp',[]);
//カートから加
A.directive('myAdds',function(){
return {
link:function(scope, element, attr){
element.click(function(){
var This=this
angular.forEach(scope.dataList,function(data,index,array){
if(attr.items==data.items){
data.num=parseInt(data.num)+1;
scope.allPrices();
scope.$apply() //ビューをリフレッシュ
}
});
});
} 
}
})
//カートから減
A.directive('myMinus',function(){
return {
link:function(scope, element, attr){
element.click(function(){
var This=this
angular.forEach(scope.dataList,function(data,index,array){
if(attr.items==data.items){
if(data.num<=1{
if(confirm('是否删除该产品')){
data.num=0;
$($(This).siblings('input')).val(0);
scope.allPrices();
scope.$apply();
//delete array[index];
scope.dataList.splice(index,1)
$($(This).parents('tr')).remove();
}
}else{
data.num=parseInt(data.num)-1;
};
scope.allPrices();
scope.$apply();
}
});
});
} 
}
})
//全選択、全非選択
A.directive('allOrcan',function(){
return function(scope, element, attr){
element.click(function(){
var isCheck=$(this).find('input').prop('checked');
if(isCheck){
$('input[type=checkbox]').prop('checked',true);
}else{
$('input[type=checkbox]').not($('input[type=checkbox]').eq(0)).prop('checked',false);
}
angular.forEach(scope.dataList,function(data,index,array){
data.Bol=isCheck;
})
scope.allPrices();
scope.$apply();
})
}
})
//単一選択
A.directive('oneCheck',function(){
return function(scope, element, attr){
element.click(function(){
var This=this
angular.forEach(scope.dataList,function(data,index,array){
if(attr.items==data.items){
var isCheck=$(This).prop('checked');
data.Bol=isCheck;
scope.allPrices();
scope.$apply();
}
})
});
}
})
A.controller('myAngular',['$scope','$filter',function($scope,$filter){
$scope.dataList=[//初期化ショッピングカートのデータ
{Bol:'false',name:'洗衣机',num:'1',items:'0',oneprice:'900',price:''},
{Bol:'false',name:'热水器',num:'1',items:'1',oneprice:'110',price:''},
{Bol:'false',name:'空调',num:'1',items:'2',oneprice:'116',price:''},
{Bol:'false',name:'冰箱',num:'1',items:'3',oneprice:'2087',price:''},
{Bol:'false',name:'電磁炉',num:'1',items:'4',oneprice:'135',price:''},
{Bol:'false',name:'毛布',num:'1',items:'5',oneprice:'50',price:''},
{Bol:'false',name:'ノート',num:'1',items:'6',oneprice:'2',price:''},
{Bol:'false',name:'ペン',num:'1',items:'7',oneprice:'115',price:''},
{Bol:'false',name:'カップ',num:'1',items:'8',oneprice:'12',price:''},
{Bol:'false',name:'書',num:'1',items:'9',oneprice:'5',price:''},
{Bol:'false',name:'零食',num:'1',items:'10',oneprice:'13',price:''}
];
//合計価格の計算
$scope.allPrices=function(){
$scope.allprice=0;
angular.forEach($scope.dataList,function(data,index,array){
data.price=data.num*data.oneprice;
if(data.Bol==true){
$scope.allprice+=parseInt(data.price);
}
})
return $scope.allprice;
};
//単価で並べ替え
$scope.CartSort=function(arg){
angular.forEach($scope.dataList,function(data,index,array){
arguments.callee['CartSort('+arg+')']=!arguments.callee['CartSort('+arg+')]
$scope.dataList=$filter('orderBy')($scope.dataList,arg,arguments.callee['CartSort('+arg+')'])
})
}
})
</script>
</head>
<body ng-controller="myAngular">
<table border="1">
   <tr>
     <td><label all-orcan><input type="checkbox">全選/全選解除</label></td>
     <td>名称</td>
     <td>数量</td>
     <td ng-click='CartSort("oneprice")'>単価</td>
     <td>価格</td>
    </tr>
   <tr ng-repeat="data in dataList"
     <td><input type="checkbox" one-check items={{data.items}}></td>
     <td ng-cloak>{{data.name}}</td>
     <td><input type="text" ng-cloak ng-model="data.num" items="{{data.items}}" style="width:50px;text-align:center;"> <button my-adds items="{{data.items}}" ng-class="{cursors:true}" >+</button> <button my-minus items="{{data.items}}" ng-class="{cursors:true}" >-</button>　</td>
     <td ng-cloak>{{data.oneprice}}</td>
     <td ng-cloak>{{data.price}}</td>
    </tr>
  </table>
  <div>合計金額：{{allPrices()}}</div>
</body>
</html>
<!--<script>alert(0)</script>-->

効果が図示されています：　

労働の成果を尊重し、転載の際には出典を明記してください（http://blog.csdn.net/sllailcp/記事/詳細/47833315）...

声明：本文の内容はインターネットから取得しており、著作権者に帰属します。インターネットユーザーにより自発的に貢献し、自己でアップロードされたものであり、本サイトは所有権を有しておらず、人工的な編集は行われていません。著作権侵害を疑う内容が見つかりましたら、メールを送信してください：notice#oldtoolbag.com（メールを送信する際には、#を@に置き換えてください。報告を行い、関連する証拠を提供してください。一旦確認が取れましたら、本サイトは直ちに侵害を疑われるコンテンツを削除します。）

基礎教程