2017-03-04 2 views
0

私は角度が新しく、シンプルなショッピングカートを開発しようとしています。私はちょうど製品のリストを作成しましたが、カートにどのように追加するのか分かりません。ここ私はシンプルなショッピングカートを作ろうとしていますが、カートに商品を追加しようと思いましたか?

は私のplunkerリンクです:https://plnkr.co/edit/oo05d6H6AxuJGXBAUQvr?p=preview

誰もどのように私は、ユーザーのために自分のコードをより効率的に伝えることができますか?

ヘルプの任意の種類は非常に私が同じItemCtrl(コントローラ)でaddProduct機能を含むべきである

<!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> 

を理解されるであろうか?

+0

を試していない場合、それはあなたが探して何を持っていることがあり、このリンクをチェックアウト? – Darshak

答えて

関連する問題