How to get input value from ng-repeat in Angular

Question

I am trying to do a simple shopping cart in angular. Basically I have list of items and would like user to enter Quantity and then get the list of items that have Qty more than 0.

If the Qty is greater than 0 then I will add them into an array otherwise remove it.

I must be doing something wrong that is preventing me to get the Qty correct.

It works only first time but the second time it does not update.

My controller:

var extras1 = {Id:1,PackageName:"Balloons",Description:'Pack of 6',Cost:'$50.00',Qty:0}
var extras2 = {Id:2,PackageName:"Hot Chips",Description:'Fresh fried hot chips fully of yummy fat and cholesterol.',Cost:'$10.00',Qty:0}
var extras3 = {Id:3,PackageName:"Sausages",Description:'Hot sausages from premium offcuts',Cost:'$10.00',Qty:0}

$scope.extras =[extras1,extras2,extras3];

 $scope.extraSelected = function(){
    $scope.selectedExtra =[];
    angular.forEach($scope.extras, function(extra)
    {
       if(extra.Qty > 0 )
       {
           console.log('Extra added');
           $scope.selectedExtra.push(extra);
       }


    })
    console.log($scope.selectedExtra);
}

Markup :

 <div  ng-repeat="extra in extras"   class="text-left">
    <div  class="row-centered">
        <div class="row form-group">
            <label class="col-md-1 col-sm-offset-1 step1-question" >{{$index + 1}}</label>
            <div class="col-md-8">
                <span class="h4 step1-answer"> {{ extra.PackageName}} </span>
                <br/>
                <span class="h5"> {{ extra.Description}} </span>
                <br/>
                <span class="h5"> {{ extra.Cost}} </span>
            </div>
            <div class="col-md-1">
            <input type='text' class="form-control step1-answer text-center "
                   ng-model="extra.Qty"
                   placeholder="0" style="background-color:#ffffff;padding: 5px;height: 45px;"
                   ng-change="extraSelected(extra)"
                />
            </div>
        </div>
        <hr/>
    </div>
</div>

Very strange code, especially when calling slice. If you only want to get array of items, where Qty > 0, not need to remove items (because you are doing $scope.selectedExtra = [];) — Alexander Anikeev
– Alexander Anikeev, Commented Sep 27, 2016 at 11:11

Alexander Anikeev · Accepted Answer · 2016-09-27 11:32:36Z

1

Maybe something, like this?

<input type="number" ng-model="extra.Qty" ng-change="extraSelected()">

$scope.extraSelected = function () {
        $scope.selectedExtra = [];
        angular.forEach($scope.extras, function(extra) {
           if(extra.Qty > 0) {
               console.log('Extra added');
               $scope.selectedExtra.push(extra);
           }
        })
        console.log($scope.selectedExtra);
    }

edited Sep 27, 2016 at 11:32

answered Sep 27, 2016 at 11:18

Alexander Anikeev

7016 silver badges15 bronze badges

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

5 Comments

snowflakes74 Over a year ago

Thank you.. that is exactly what I did after your comment but it only shows the Qty for the first time. If I edit the Qty second time it does not update the Qty.

Alexander Anikeev Over a year ago

I try it in JSFiddle, and it works. $scope.selectedExtra and $scope.extras with needed Qty

snowflakes74 Over a year ago

It does but only works 1 time, second time if the qty is updated to say 3 it will not show in console the updated value for Qty as 3. Console still displays as Qty 1

Alexander Anikeev Over a year ago

In console.log all is fine, i can't understan whats wrong on your side. All changes are visible. jsfiddle

snowflakes74 Over a year ago

Thanks ..must be tired old eyes.It is showing correct Qty.

Sten Muchow · Accepted Answer · 2016-09-27 11:11:30Z

0

 $scope.extraSelected = function(extra){
    $scope.selectedExtra =[];
    angular.forEach($scope.extras, function(extra)

You have extra defined as the parameter being passed in and also as the parameter to the forEach function - the forEach is looping over the array with Qty is 0, so it will always be zero.

Change one of the function parameters so it doesnt clobber the other.

Lesson in functional scoping here...

answered Sep 27, 2016 at 11:11

Sten Muchow

6,7314 gold badges38 silver badges46 bronze badges

Collectives™ on Stack Overflow

How to get input value from ng-repeat in Angular

2 Answers 2

5 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related