Why AngularJS $scope is not working correctly?

Question

I'm new in AngularJS, I want to create an array and post it to server by register function, here's Controller code:

root.controller('mainController', function($scope) {
    $scope.lineItems = [];
    $scope.addItem = function (id) {
        $scope.lineItems.push(id);
        console.log($scope.lineItems);
        // gives me right data -> Array [ "1", "2", "3", "4", "1" ]
    };
    $scope.register = function () {
        // post data to server
        console.log($scope.lineItems);
        // gives me an empty array -> Array [ ]
    };
});

Here's HTML code and directives:

<div class="container" ng-controller="mainController">
    <a ng-click="register()"></a>

    <div ng-repeat="product in products">
        <a class="btn" ng-click="addItem(product.id)">Add</a>
    </div>
</div>

The problem occurs when i want to call register function, it gives me an empty array instead of array elements while it's not gonna happen in addItem function.

when you click on the anchor tag, does it console.log properly? — Joe Thomas
– Joe Thomas, Commented Apr 30, 2016 at 10:00
Could you share a copy of the code in a Plunker? From what you've shown, everything should be working as expected. — Iain J. Reid
– Iain J. Reid, Commented Apr 30, 2016 at 10:11

Hadi · Accepted Answer · 2018-07-25 06:50:21Z

1

This is your code and work correctly.

var app = angular.module("testApp", []);
app.controller('testCtrl', function($scope){
  
    $scope.products = [{id:1},{id:2},{id:3},{id:4}];
  
  $scope.lineItems = [];
    $scope.addItem = function (id) {
        $scope.lineItems.push(id);
        console.log($scope.lineItems);
        // gives me right data
    };
    $scope.register = function () {
        // post data to server
        console.log($scope.lineItems);
        // gives me an empty array
    };

  
 
});

<div ng-app="testApp" ng-controller="testCtrl">
   <a ng-click="register()">Register</a>

<div ng-repeat="product in products">
    <a class="btn" ng-click="addItem(product.id)">Add : {{product.id}}</a>
</div>
   
</div>

edited Jul 25, 2018 at 6:50

user5069269

answered Apr 30, 2016 at 10:22

Hadi

17.3k4 gold badges41 silver badges63 bronze badges

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

1 Comment

user5069269 Over a year ago

Yes, I think I made a simple mistake.

Collectives™ on Stack Overflow

Why AngularJS $scope is not working correctly?

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related