使用AngularJs控制器的购物车应用程序_Angularjs

使用AngularJs控制器的购物车应用程序

angularjs

使用AngularJs控制器的购物车应用程序,angularjs,Angularjs,我正在用AngularJs做一个购物车，但是我在向购物车添加产品时遇到了问题。我想我的控制器上有错误： My data.json： { "items": [ { "product": { "name": "Smartphone", "price": { "value": 3509.10, } } }, { "produ

我正在用AngularJs做一个购物车，但是我在向购物车添加产品时遇到了问题。我想我的控制器上有错误：

My data.json：

{
"items": [
    {
        "product": {
            "name": "Smartphone",
            "price": {
                "value": 3509.10,
            }
        }
    },

    {
        "product": {

            "name": "Lenovo ",
            "price": {
                "value": 2599.00,

            }
        }
    }
]
}

my controller.js：

var app = angular.module("list", []);
app.controller("ListCtrl", ["$scope", "$http",
 function($scope, $http) {
 $scope.products = [];
 $http({
   method: 'GET',
   url: 'data.json'
 }).success(function(data) {
    angular.forEach(data.items, function(item, index) {
    $scope.products.push(item.product);
   });
 });
 }
 $scope.carts=[];
 $scope.add_cart = function(product){
  if(product){
    $scope.carts.push({ p_name: product.name, p_valor:product.price.value,);
  } 
}


$scope.total = 0;

$scope.setTotals = function(cart){
  if(cart){
    $scope.total += cart.p_valor;
  }
}

$scope.remove_cart = function(cart){
  if(cart){
    $scope.carts.splice($scope.carts.indexOf(cart), 1);
    $scope.total -= cart.p_valor;
  }
}
]);

我的html：

    <body  ng-controller="ListCtrl" ng-app="list">
     <ul ng-repeat="product in products">
        <li>{{product.name}} </li>
        <li>{{product.price.value}}</li>
        <li><button type = "button" ng-click = "add_cart(product)"> Add to cart</button></li>
    </ul><br>
    <ul ng-repeat = "cart in carts" ng-init = "setTotals(cart)">
       <li>{{cart.p_name}}</li>
       <li>{{cart.p_price}}</li> 
       <li><button type = "button" ng-click = "remove_cart(cart)">X</button>
       </li>
    </ul>
    <ul>
      <li>{{total}}</li>
    </ul>

   </body>



{{product.name}
{{product.price.value}
添加到购物车



{{cart.p_name}
{{cart.p_price}}
X



{{total}}

我需要按钮添加到购物车正常工作，带来产品名称和产品的价值。我还需要它带来的总价值，还需要删除产品时，点击按钮删除购物车

我需要帮助

我发现一些语法错误

var app = angular.module("list", []);
app.controller("ListCtrl", ["$scope", "$http",
  function ($scope, $http) {
    $scope.products = [];
    $http({
      method: 'GET',
      url: 'data.json'
    }).success(function (data) {
      angular.forEach(data.items, function (item, index) {
        $scope.products.push(item.product);
      });
    });
    $scope.carts = [];
    $scope.add_cart = function (product) {
      if (product) { 
        $scope.carts.push({
          p_name: product.name,
          p_valor: product.price.value,
        }); //Here syntax err
      }
    }

    $scope.total = 0;

    $scope.setTotals = function (cart) {
    if (cart) {
      $scope.total += cart.p_valor;
    }
  }

  $scope.remove_cart = function (cart) {
            if (cart) {
                $scope.carts.splice($scope.carts.indexOf(cart), 1);
                $scope.total -= cart.p_valor;
            }
        }
    }  //Here syntax err
]);

您的

controller.js

文件包含一些语法错误。在将代码放入stackoverflow的篮子之前，请检查代码中是否存在任何打字错误或语法错误<不管怎样，在编写代码时，您需要记住一些要点

建议在javascript中使用camelCase
每个职能部门应致力于执行特定任务（个人意见）
遵循styleguide很好&
```
$scope
```
，而
```
$watch
```
用于数据绑定，所以您可以在模板或指令等其他作用域中使用数据。数据绑定是AngularJs的主要卖点，但它也有一些优点
权力伴随着巨大的责任眨眼

请看一看，这是您的代码的现场演示

var-app=angular.module（“列表”，[]）；
ListController.$inject=[“$scope”，“$http”]；
应用程序控制器（“ListCtrl”，ListController）；
函数ListController（$scope，$http）{
函数onLoad（）{
$scope.products=[]；
$scope.carts=[]；
$scope.total=0；
//getProducts（）；
蠕形螨（）；
}
onLoad（）；
$scope.addCart=addCart；
$scope.getTotals=getTotals；
$scope.removeCart=removeCart；
//在产品中使用时应移除
函数demoData（）{
风险值数据={
“项目”：[{
“产品”：{
“名称”：“智能手机”，
“价格”：{
“价值”：3509.10，
}
}
},
{
“产品”：{
“名称”：“联想”，
“价格”：{
“价值”：2599.00，
}
}
}]
}
分析产品（数据项）；
}
函数getProducts（）{
$http.get（'data.json'）
.success（函数（数据）{parseProducts（data.items）}）
}
功能分析产品（项目）{
angular.forEach（项目、功能（项目、索引）{
$scope.products.push（item.product）；
});
}
功能addCart（产品）{
if（产品）{
$scope.carts.push（{
p_名称：product.name，
p_价格：产品、价格、价值
});
} 
}
函数getTotals（）{
var初始值=0；
$scope.total=$scope.carts.reduce（（x，y）=>x+y[“价格”]，初始值）；
}
功能移除部分（i）{
$scope.carts.拼接（i，1）；
getTotals（）；
}
}



{{product.name}
{{product.price.value}
添加到购物车



{{cart.p_name}
{{cart.p_price}}
X



{{total}}

得到总数

按下按钮时会发生什么？有日志吗？你看到有例外吗？尝试添加日志消息，以遵循程序流程注意：不断添加删除产品将使用添加和减去数字。相反，您应该从填充的列表

carts

中将它们相加为：

$scope.total=$scope.carts.reduce（（x，y）=>{return x+y[“p_valor”]}，0）。欢迎使用，如果您觉得它有用，您可以选择它作为答案或投票，以便其他人可以利用它。