Angular.js를 사용하여 간단한 장바구니 기능 구현-JS 튜토리얼-php.cn

집

웹 프론트엔드

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으로 문의하세요.