我正在尝试制作一个简单的购物车,但我很惊讶将产品添加到购物车?

时间:2017-03-04 06:55:53

标签: jquery html angularjs angular-ui-router

我是棱角分明的新手,我正在尝试开发一个简单的购物车,我刚刚创建了一系列产品,但我还没有得到如何将它们添加到购物车中?

这是我的plunker链接:https://plnkr.co/edit/oo05d6H6AxuJGXBAUQvr?p=preview

任何人都可以告诉我如何让我的代码对用户更有效率?

任何形式的帮助都将受到高度赞赏

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-route.js"></script>
 <script src="script.js"></script>
<body ng-app="myApp" ng-controller="mobileController">
<h2> Welcome to Mobile Store</h2>  

<p>Search:<input type="text" ng-model="test"></p>


<ul>
 <li ng-repeat="item in items|filter:test"><a href="#/item/{{item.name}}">{{ item.name }}</a>
  </li>

</ul>



<div ng-view></div>

  </body>

</html>
// Code goes here



var app = angular.module("myApp", ["ngRoute"]);
app.controller('mobileController', function($scope) {
  $scope.items = [{
    name: 'Iphone',
    price: 70000,
    rating: '*****',
    image: 'http://i.imgur.com/hfMaGTN.png'
  }, {
    name: 'Oneplus',
    price: 60000,
    rating: '****',
    image: 'http://i.imgur.com/sBcs5ZE.jpg'
  }, {
    name: 'Samsung',
    price: 50000,
    rating: '***',
    image: 'http://i.imgur.com/8Bexxbf.jpg'
  }, {
    name: 'Sony',
    price: 40000,
    rating: '***',
    image: 'http://i.imgur.com/0c7PcX8.png'
  }, {
    name: 'Moto',
    price: 20000,
    rating: '****',
    image: 'http://i.imgur.com/HyWR1VE.png'
  }];
});
app.config(function($routeProvider) {
  $routeProvider
    .when('/item/:itemName', {
      templateUrl: 'details.html',
      controller: 'ItemCtrl'
    });
});

app.controller('ItemCtrl', ['$scope', '$routeParams',
  function($scope, $routeParams) {
    angular.forEach($scope.items, function(item) {
      if (item.name == $routeParams.itemName) {
        $scope.itemName = item.name;
        $scope.itemPrice = item.price;
        $scope.itemRating = item.rating;
        $scope.itemImage = item.image;
      }
    });
  }
]);

This is the details page
<!DOCTYPE html>

 <p>ItemName: {{itemName}}</p>
<p> ItemPrice: {{itemPrice}}</p>
 <p>ItemRating:{{itemRating}}</p>
<img src="{{itemImage}}">
<p><input type = "submit" value = "Add to Cart" ng-click = "addProduct()"></p>

我应该在同一个ItemCtrl(控制器)中包含addProduct函数吗?

1 个答案:

答案 0 :(得分:0)

查看此链接它可能有你想要的东西,如果不好我试过lol

https://www.codeproject.com/Articles/1034593/Angular-js-with-ASP-NET-MVC-Insert-Update-Delete