مثال على إنشاء وظيفة عربة التسوق باستخدام 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();
//حذف 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/article/details/47833315)...

البيان: محتويات هذا المقال تم جمعها من الإنترنت، ويتمتع مالكها بحقوق الطبع والنشر، تم جمع المحتوى من قبل المستخدمين عبر الإنترنت بطرق متفاوتة، ولا يمتلك هذا الموقع حقوق الملكية، ولا يتم تعديل المحتوى بشكل يدوي، ولا يتحمل هذا الموقع أي مسؤولية قانونية المتعلقة بذلك. إذا اكتشفت أي محتوى يشتبه في حقوق الطبع والنشر، فلا تتردد في إرسال بريد إلكتروني إلى: notice#oldtoolbag.com (عند إرسال البريد الإلكتروني، يرجى استبدال # بـ @) للإبلاغ، وتقديم الأدلة ذات الصلة، وإذا تم التحقق من ذلك، سيتم حذف المحتوى المزعوم فوراً.

تعليمية الأساس

من المحتمل أن تفضّل