Javascript 如何在angularJS的列表中添加项目?
我想在“添加到购物车”按钮点击,项目将添加到“我的购物车”。这是我的angularJS代码Javascript 如何在angularJS的列表中添加项目?,javascript,jquery,html,angularjs,Javascript,Jquery,Html,Angularjs,我想在“添加到购物车”按钮点击,项目将添加到“我的购物车”。这是我的angularJS代码 app.controller("OnlineShopping", function($scope) { $scope.items = [ {Product:"Moto G2", Desc: "Android Phone", Price: 10999}, {Product:"The Monk who sold his ferrari", Desc: "Motiva
app.controller("OnlineShopping", function($scope)
{
$scope.items = [
{Product:"Moto G2", Desc: "Android Phone", Price: 10999},
{Product:"The Monk who sold his ferrari", Desc: "Motivational book", Price: 250},
{Product:"Mi Power Bank", Desc: "Power Bank", Price: 999},
{Product:"Dell Inspiron 3537", Desc: "Laptop", Price: 45600}
];
$scope.editing = false;
$scope.addItem = function(item) {
$scope.items.push(item);
$scope.item = {};
};
我在这里发现了一些关于使用ng model
和ng bing
的问题,但是它可以与textbox一起使用,但是这里我没有从textbox获取输入。这是我的“我的购物车”的不完整代码
我的购物车
项目
描述
价格
看起来不错
试着把线移走
$scope.item = {};
还把它包在一块美元的手表上
$scope.$watch('items', function(){
console.log('items changed');
});
您只需要使用添加单元格值。但在此之前,当您单击“添加到购物车”按钮时,需要将项目添加到另一个变量$scope.myCartItems
$scope.addToCart = function(item)
{
$scope.myCartItems.push(item);
}
模板将更改如下:
<h2>My Cart</h2>
<div style="border: 1px solid blue;">
</div>
<table border="1" class="mytable">
<tr>
<td>Item</td>
<td>Description</td>
<td>Price</td>
</tr>
<tr ng-repeat="item in myCartItems">
<td>{{item.Product}}</td>
<td>{{item.Desc}}</td>
<td>{{item.Price}}</td>
</tr>
</table>
我的购物车
项目
描述
价格
{{item.Product}
{{item.Desc}}
{{item.Price}}
看看这个plnkr 你想让我们完成你的代码……还是你有疑问?@pankajparkar我只是想知道我哪里出了问题。检查kathir answersI希望您更新您的问题..bdw很高兴看到您的问题得到解决添加
console.log(“添加到购物车”)后工作正常;控制台日志(项目)代码>在我的angularJS代码中。如果您能解释一下它的作用,这对我和其他人也会更有帮助。console.log语句仅用于调试目的,它们对方法的功能没有任何影响。
<h2>My Cart</h2>
<div style="border: 1px solid blue;">
</div>
<table border="1" class="mytable">
<tr>
<td>Item</td>
<td>Description</td>
<td>Price</td>
</tr>
<tr ng-repeat="item in myCartItems">
<td>{{item.Product}}</td>
<td>{{item.Desc}}</td>
<td>{{item.Price}}</td>
</tr>
</table>