[英]How to add objects from ng-repeat into a controller array ($scope)?
I have an array which is:我有一个数组,它是:
$scope.products=[
{name:'Orange', price:'1.15'},
{name:'Apple', price:'1.08'},
{name:'Pear', price:'1.85'},
{name:'Mango', price:'2.10'},
{name:'Blueberry', price:'0.55'},
{name:'Strawberry', price:'1.40'}
];
And I've added a button to every array, since I am creating a shopping cart.而且我在每个数组中都添加了一个按钮,因为我正在创建一个购物车。 I created an empty array which is the cart of the selected products, but when I try to add these objects to my new array it doesnt work.
我创建了一个空数组,它是所选产品的购物车,但是当我尝试将这些对象添加到我的新数组时它不起作用。 The code is the following:
代码如下:
<li ng-repeat="x in products | orderBy:'name'">
{{x.name + " : " + '$' + x.price}}
<button type="button" class="btn btn-dark" ng-click="addItem(x)">
Add product
</button>
</li>
and the controller is: controller 是:
$scope.cart=[];
$scope.addItem = function(x){
$scope.cart.push($scope.x);
console.log($scope.cart);
};
You are passing the object into the function in the ng-click
as x
and it is not $scope.x
so just change:您在
ng-click
中将 object 传递给 function 作为x
并且它不是$scope.x
所以只需更改:
$scope.cart.push($scope.x);
To至
$scope.cart.push(x);
What worked is:有效的是:
<div ng-app="myApp" ng-controller="ctrl" class="container">
<h3>Lets use controllers with methods!</h3>
<p>Input first number: <input type="text" ng-model="first" class="form-control"></p>
<p>Input second number: <input type="text" ng-model="second" class="form-control"></p>
<br>
<p>Sum: {{sum()}}</p>
<p>Sum: {{mup()}}</p>
<hr>
<h3>Shopping Cart example!</h3> <br>
<div class="container-fluid">
<div style="height: 400px; width: 200px;" class="overflow-auto">
<ul>
<br>
<li ng-repeat="x in products">
{{x.name + " : " + '$' + x.price}}
<br>
<button type="button" class="btn btn-dark" ng-click="addItem($index)">Add product</button><br><br>
</li>
</ul>
</div>
<div style="height: 400px; width: 200px; margin-left: 20px" class="overflow-auto">
<ul>
<br>
<li ng-repeat="x in cart track by $index">
{{x.name + " : " + '$' + x.price}}
<button type="button" class="btn btn-dark" ng-click="removeItem($index)">Remove</button><br><br>
</li>
</ul>
</div>
<div style="margin-left: 50%; position: absolute;" class="container-sm">
<ul>
<br><br>
<p>Check out!</p>
<p style="color: red">Total paycheck: {{checkOut() | currency}}</p>
</ul>
</div>
</div>
</div>
<script>
var app = angular.module("myApp",[]);
app.controller("ctrl",function($scope){
$scope.sum = function() {
if(isNaN($scope.first) && isNaN($scope.second)){
return "Please enter a number";
}else{
return Number($scope.first) + Number($scope.second);
}
};
$scope.mup = function() {
if(isNaN($scope.first) || isNaN($scope.second)){
return "Please enter a number";
}else{
return $scope.first * $scope.second;
}
};
//Shopping cart $scope
$scope.products=[
{name:'Orange', price:1.15},
{name:'Apple', price:1.08},
{name:'Pear', price:1.85},
{name:'Mango', price:2.10},
{name:'Blueberry', price:0.55},
{name:'Strawberry', price:1.40}
];
$scope.cart=[];
$scope.addItem = function(x){
$scope.cart.push($scope.products[x]);
};
$scope.removeItem = function(x){
$scope.cart.pop($scope.products[x]);
};
$scope.checkOut = function(){
var total = 0;
for (var i in $scope.cart) {
total += $scope.cart[i].price;
}
return total.toFixed(2);
};
});
</script>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.