How to push items into an angular $scope.array?

Question

I'm doing something wrong yet I cannot see what (this is probably due to my low AngularJS skills). I have a simple ng-repeat in my HTML:

<ul>
  <li ng-repeat="fot in fotografia"><img src="{{fot.path}}"></li>
</ul>

and here is my app.js:

myApp.controller('homeController', function($scope) {
    // fotografia = []; is here only because I get an error otherwise,
    // which means my later for loop can't access the $scope.fotografia

    fotografia = [];
    $scope.fotografia = [
        {path:'img/fotografia/fot_1.jpg'},
        {path:'img/fotografia/fot_2.jpg'}
    ];

    // I want to add more images with this:
    for(var i=0; i<5; i++) {
        fotografia.push({
            path: 'img/fotografia/fot_'+[i]+'.jpg'
        });
    }
});

Ng-repeat works fine with the 2 images I already have in my array (fot_1.jpg, fot_2.jpg). The loop is the the problem. How do I go about pushing more items into my array?

The only way this would work is if made both fotografia and $scope.fotografia reference the same array, ie fotografia = $scope.fotografia = [], the way you have it now they reference two different arrays — Patrick Evans
– Patrick Evans, Commented Apr 19, 2015 at 13:16
you just forgot use $scope. the view is binded to $scope variables not private variables. — vinayakj
– vinayakj, Commented Apr 19, 2015 at 13:18
Moreover, even if this has no impact in your current code, but JSON standard defines that String shall be delimited by double quotes ". Your image shall be {path:"img/fotografia/fot_1.jpg"}. To solve your issue, replace fotografia by $scope.fotografia into your controller — aorfevre
– aorfevre, Commented Apr 19, 2015 at 13:35

user1777136 · Accepted Answer · 2015-04-19 13:14:32Z

8

Just push them onto the array in the scope. angular will then update the view.

for(var i=0; i<5; i++) {
    $scope.fotografia.push({
        path: 'img/fotografia/fot_'+[i]+'.jpg'
    });
}

answered Apr 19, 2015 at 13:14

user1777136

1,76614 silver badges28 bronze badges

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

Comments

Mrluobo · Accepted Answer · 2015-04-19 13:28:22Z

1

Angular will update the view when everything in scope is changed or you use $scope.digest(). so just push items into the array in scope,remove the fotografia = []; because you don't need it. just like this:

```

myApp.controller('homeController', function($scope) {
    $scope.fotografia = [
        {path:'img/fotografia/fot_1.jpg'},
        {path:'img/fotografia/fot_2.jpg'}
    ];
    for(var i=0; i<5; i++) {
        $scope.fotografia.push({
            path: 'img/fotografia/fot_'+[i]+'.jpg'
        });
    }
});

```

answered Apr 19, 2015 at 13:28

Mrluobo

858 bronze badges

Comments

RahulOnRails · Accepted Answer · 2024-02-06 19:09:51Z

1

fotografia is a property of the $scope object, so you would do something like:

for(var i=0; i<5; i++) {
  $scope.fotografia.push({
    path: 'img/fotografia/fot_'+[i]+'.jpg'
  });
}

edited Feb 6, 2024 at 19:09

RahulOnRails

6,54211 gold badges55 silver badges88 bronze badges

answered Apr 19, 2015 at 13:23

Adi

6,5001 gold badge27 silver badges37 bronze badges

Collectives™ on Stack Overflow

How to push items into an angular $scope.array?

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related