angularjs php电商网站,AngularJs应用：实现类似购物页面的一个小例子（附代码）...

本篇文章给大家带来的内容是关于AngularJs应用：实现类似购物页面的一个小例子(附代码)，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。

写个小应用，熟练一下AngularJs.。

Page Title

var myApp=angular.module('myApp',[]);//定义一个控制器

var model={//model模块，里面主要包含了数据

money:0,

items:[

{name:'钢笔',price:50,number:1},

{name:'练习本',price:1,number:0},

{name:'保温杯',price:25,number:0},

{name:'书包',price:80,number:0}

]

};

//$scope是angular的一个全局对象，你可以往上面加上属性和方法

myApp.controller('myControl',function($scope) {//控制器模块

$scope.model=model;//注意一下，前面的model在HTML中是看不到的，$scope.model这个model是可以的 $scope是全局对象，注意

$scope.Add=function (newItem) {//添加内容

$scope.model.items.push({name:newItem.name,price:newItem.price});

}

$scope.sum=function() {//计算费用

var Sum=0;

angular.forEach($scope.model.items , function (item) {

Sum+=item.price*item.number;

} );

return Sum;

}

$scope.add=function(target) {

target.number++;

}

})

总价为: {{sum()}}元

商品:

单价:

添加

商品单价购买数Buy Or Not

{{item.name}}{{item.price}}{{item.number}}BUY

运行效果如下：

相关推荐：