使用Angular.js实现简单的购物车功能-js教程-PHP中文网

首页

web前端

js教程

使用Angular.js实现简单的购物车功能

Dec 06, 2016 am 10:25 AM

angular.js

先给大家分享实现代码，在代码下面有效果图展示，大家可以两者结合参考下，废话不多说了，具体代码如下所示：

   
&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
&lt;meta charset=&quot;UTF-8&quot;&gt;
&lt;title&gt;&lt;/title&gt;
&lt;script src=&quot;http://code.angularjs.org/1.2.5/angular.min.js&quot;&gt;&lt;/script&gt;
&lt;style type=&quot;text/css&quot;&gt;
td,th{
width: 150px;
text-align: left;
}
table{
width: 800px;
}
.num{
width: 70px;
text-align: center;
}
tr td:last-child button {
background-color: red;
}
#foot button{
background-color: red;
}
&lt;/style&gt;
&lt;/head&gt;
&lt;!--ng-bind是从$scope -&gt; view的单向绑定ng-modle是$scope &lt;-&gt; view的双向绑定
{{}} 与 ng-bind 的区别是后者在加载时用户不会看到渲染之前的东西,前者可能会看到,所以首页一般用后者加载数据
--&gt;
&lt;body ng-app=&quot;myApp&quot;&gt;
&lt;div ng-controller=&quot;VC1&quot;&gt;
&lt;table border=&quot;&quot; cellspacing=&quot;&quot; cellpadding=&quot;&quot;&gt;
&lt;tr&gt;&lt;th&gt;产品编号&lt;/th&gt;&lt;th&gt;产品名称&lt;/th&gt;&lt;th&gt;购买数量&lt;/th&gt;&lt;th&gt;产品单价&lt;/th&gt;&lt;th&gt;产品总价&lt;/th&gt;&lt;th&gt;操作&lt;/th&gt;&lt;/tr&gt;
&lt;tr ng-repeat=&quot;x in Product&quot; &gt;
&lt;td&gt;{{x.id}}&lt;/td&gt;
&lt;td&gt;{{x.name}}&lt;/td&gt;
&lt;td&gt;
&lt;button ng-click=&quot;reduce($index)&quot;&gt;-&lt;/button&gt;
&lt;input type=&quot;text&quot; class=&quot;num&quot; ng-model=&quot;x.quantity&quot; ng-change=&quot;change($index)&quot; /&gt;
&lt;button ng-click=&quot;add($index)&quot;&gt;+&lt;/button&gt; &lt;/td&gt;
&lt;td &gt;{{x.price}}&lt;/td&gt;
&lt;td&gt;{{x.price * x.quantity}}&lt;/td&gt;
&lt;td&gt;&lt;button ng-click=&quot;remove($index)&quot;&gt;移除&lt;/button&gt;&lt;/td&gt;&lt;/tr&gt;
&lt;/table&gt;
&lt;div id=&quot;foot&quot;&gt;&lt;span&gt;总价:&lt;/span&gt;&lt;span ng-bind=&quot;totalQuantity()&quot;&gt;&lt;/span&gt;&lt;span&gt;购买数量&lt;/span&gt;
&lt;span &gt;{{numAll()}}&lt;/span&gt; &lt;button ng-click=&quot;removeAll()&quot;&gt;清空购物车&lt;/button&gt; &lt;/div&gt;
&lt;/div&gt;
&lt;/body&gt;
&lt;script type=&quot;text/javascript&quot;&gt;
var app = angular.module(&quot;myApp&quot;,[]);
app.controller(&quot;VC1&quot;,function($scope){
$scope.Product = [{
id: 1000,
name: &quot;iPhone8&quot;,
quantity: 1,
price: 8888
}, {
id: 1001,
name: &quot;iPhone9&quot;,
quantity: 1,
price: 9888
}, {
id: 1002,
name: &quot;iPhone 2s&quot;,
quantity: 1,
price: 3888
}, {
id: 1003,
name: &quot;iPhone 7P+&quot;,
quantity: 1,
price: 10088
}];
//减少数量
$scope.reduce = function(index){
if( $scope.Product[index].quantity &gt; 1){
$scope.Product[index].quantity--;
}else{
$scope.remove(index);
}
}
//添加数量函数
$scope.add = function(index){
$scope.Product[index].quantity++;
}
//所有商品总价函数
$scope.totalQuantity = function(){
var allprice = 0
for(var i = 0 ; i &lt;$scope.Product.length;i++ ){
allprice += $scope.Product[i].quantity * $scope.Product[i].price;
}
return allprice;
}
//购买总数量函数
$scope.numAll = function(){
var numAlls = 0
for(var i = 0 ; i &lt;$scope.Product.length;i++ ){
numAlls += $scope.Product[i].quantity;
}
return numAlls;
}
//删除当前商品
$scope.remove = function(index){
if(confirm(&quot;确定要清空数据吗&quot;)){
$scope.Product.splice(index,1)
}
}
//清空购物车
$scope.removeAll = function(){
if(confirm(&quot;你确定套清空购物车所有商品吗?&quot;)){
$scope.Product = [];
}
}
//解决输入框输入负数时变为1
$scope.change = function(index){
if ( $scope.Product[index].quantity &gt;= 1) {
}else{
$scope.Product[index].quantity = 1;
}
}
$scope.$watch(&#39;Product&#39;,function(oldvalue,newvalue){
console.log(oldvalue);
console.log(newvalue);
})
})
&lt;/script&gt;
&lt;/html&gt;

登录后复制

本站声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn