How to add objects from ng-repeat into a controller array ($scope)?

Question

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:

$scope.cart=[];
$scope.addItem = function(x){
    $scope.cart.push($scope.x);
    console.log($scope.cart);
};

charlietfl · Accepted Answer · 2020-12-14 00:34:32Z

1

You are passing the object into the function in the ng-click as x and it is not $scope.x so just change:

$scope.cart.push($scope.x);

To

$scope.cart.push(x);

edited Dec 14, 2020 at 0:34

answered Dec 14, 2020 at 0:19

charlietfl

172k14 gold badges125 silver badges154 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Edonis Cena Over a year ago

Thanks for your help, I'll post the code in the following :D

Edonis Cena · Accepted Answer · 2020-12-14 14:55:00Z

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>

Collectives™ on Stack Overflow

How to add objects from ng-repeat into a controller array ($scope)?

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related