我是棱角分明的新手,我正在尝试开发一个简单的购物车,我刚刚创建了一系列产品,但我还没有得到如何将它们添加到购物车中?
这是我的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函数吗?
答案 0 :(得分:0)
查看此链接它可能有你想要的东西,如果不好我试过lol
https://www.codeproject.com/Articles/1034593/Angular-js-with-ASP-NET-MVC-Insert-Update-Delete