Push To Angular JS Array

Question

I'm running into a strange issue when executing the .push() method on an angular js collection. In the console I can see the object is added, but I cannot actually see it added to the list.

    $scope.discountCodes.push({
                discountCodeId: 0,
                name: $scope.discountModel.name,
                code: $scope.discountModel.code,
                codeValue: $scope.discountModel.codeValue,
                valueType: $scope.discountModel.valueType,
                startDate: $scope.discountModel.startDate,
                endDate: $scope.discountModel.endDate,
                isActive: "True"
            });

I have a simple repeater combined with a template

    <div ng-repeat="discount in discountCodes" ng-include="getTemplate(discount)">
                                </div>
    <script type="text/ng-template" id="display">
                    <div class="row">
                        <div class="col-md-3">
                            <span>Name:<br />{{discount.Name}}</span>
                        </div>
                        <div class="col-md-2">
                            <span>Code:<br />{{discount.Code}}</span>
                        </div>
                        <div class="col-md-2">
                            <span>Value:<br />{{discount.CodeValue}}</span>
                        </div>
                        <div class="col-md-2">
                            <span>Active:<br /></span>
                            <i class="icon-circle green-fill"
                               ng-show="discount.IsActive">
                            </i>
                            <i class="icon-circle red-fill"
                               ng-show="!discount.IsActive">
                            </i>
                        </div>
                        <div class="col-md-2"><br />
                            <a href="#" ng-click="editDiscount(discount)" id="lnkEditRow" name="lnkEditRow" class="gray-fill"><i class="icon-edit icon-2x"></i></a>
                        </div>
                    </div>
                </script>

This is the method: $scope.discountModel.formSubmit = function (item, event) {

        $scope.alertMessageContainerVisible = false;

        if ($scope.frmDiscountForm.$valid) {
            var dataObject = {
                discountCodeId: 0,
                name: $scope.discountModel.name,
                code: $scope.discountModel.code,
                codeValue: $scope.discountModel.codeValue,
                valueType: $scope.discountModel.valueType,
                startDate: $scope.discountModel.startDate,
                endDate: $scope.discountModel.endDate,
                isActive: "True"
            };
            action = "NEW";

            $scope.discountCodes.push(dataObject)
            });
        }
    }

Any ideas are helpful, I am new to Angular JS so be easy on me :)

I created a very simple version of this below: http://plnkr.co/edit/qJDU7uiFleWIOjR5LYFh

I think JSON is case sensitive. Try discount.name instead of discount.Name in your template. — Pete
– Pete, Commented Apr 28, 2015 at 21:13
show where you call this push from. If it's an event outside of angular world you need to notify angular to run a digest — charlietfl
– charlietfl, Commented Apr 28, 2015 at 22:13
As @Pete said, JSON is case sensitive, you are calling every JSON property inside the template with capital letter as discount.Name. eg — Fals
– Fals, Commented Apr 28, 2015 at 23:23
I made sure the case matched in both the object I'm pushing to the collection and also in the template. Still cannot get the new object to show up even though it gets added to the collection — Mike Anderson
– Mike Anderson, Commented Apr 29, 2015 at 13:46
I created this simple version, still no luck: plnkr.co/edit/qJDU7uiFleWIOjR5LYFh — Mike Anderson
– Mike Anderson, Commented Apr 29, 2015 at 14:19

jake · Accepted Answer · 2015-04-29 01:57:57Z

2

It looks like you might be updating the collection outside of the Angular context. If so, you'll need to use $scope.$apply() for Angular to see your changes.

answered Apr 29, 2015 at 1:57

jake

1,0278 silver badges9 bronze badges

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

3 Comments

jake Over a year ago

I'm noticing a few things in the first Plunker you posted. You've got multiple references to the same ng-controller on the same view. You should only reference the controller one time. Also, make sure you're using the same casing between the model in your view and the controller. For example, in your form you're using ng-model="discountModel.name" where name is camel cased. In your model on the controller and in the template you're using Pascal casing 'Name'. Here's a Plunker that shows the example working with a few modifications. plnkr.co/edit/FyJf1WKtdaheAgDtJIF5?p=preview

jake Over a year ago

I've reviewed your second Plunker and made a few modifications to get it working. The same general items from my previous post apply. Make sure to only include one ng-controller reference and make sure you're using the same casing between your model and view. You might also consider using ng-submit to submit the form data to your controller. Here's the modified Plunker. plnkr.co/edit/YNIEb7z8cEZfILTKszHq?p=preview

Mike Anderson Over a year ago

Thanks for all that! Everything is working great now!

Mike Anderson · Accepted Answer · 2015-04-29 14:53:51Z

0

Turned out to be a stupid mistake! I had my controller defined in the body and in the div, so it was in two places. Now everything is working good!

Thanks all, it was good learning experience

answered Apr 29, 2015 at 14:53

Mike Anderson

6073 gold badges8 silver badges21 bronze badges

Collectives™ on Stack Overflow

Push To Angular JS Array

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related