How to append data in ng-repeat scope from outside in angularjs?

Question

I have an issue with AngularJS ng-view and ng-repeat, and I believe it has to do with the way I handle the scope. I use ng-repeat to show a list of items present in an array. And a button that is outside the ng-repeat scope on ng-click updates the array. But some how I am not able to get this feature working. Here is a sample of my code:

<!-- home.html partial -->
<h1>Home view</h1>
<div>
  <ul ng-repeat="p in posts.data">
    <li>{{p.title}}</li>
  </ul>
  <a href="#" ng-click="updatePosts(5)">More</a>
</div>

Here is the controller that is bound to this partial file:

var app = angular.module('plunker', ['ngRoute']);
app.config(function($routeProvider){
  $routeProvider
    .when('/', {
      controller: 'testController',
      templateUrl: 'home.html'
    })
    .otherwise({ redirectTo: '/' });
});

app.controller('testController', 
  [
    '$scope', 
    function ($scope) 
    {
      $scope.posts = {
        data : []
      };
      $scope.getPosts = function(count)
      {
        for(i =0; i<count; ++i)
        {
          $scope.posts.data.push({title : "Title-"+i})
        }
      }
      $scope.updatePosts = function(count)
      {
        var offset = $scope.posts.data.length;
        var data = [];
        for(i =offset; i<offset+count; ++i)
        {
          data.push({title : "Title-"+i});
        }
        $scope.posts.data = $scope.posts.data.concat(data)
      }
      $scope.getPosts(5);
    }
  ]
);

The feature that I want is when one clicks "More" link on the main page, the controller should get little snippets of code and update the view with more data. For instance, I would expect the view to go from (1) to (2) on clicking "More". But I always end up with just (1) no matter what.

(1)

Home View

Title-0
Title-1
Title-2
Title-3
Title-4

More

(2)

Home View

Title-0
Title-1
Title-2
Title-3
Title-4
Title-5
Title-6
Title-7
Title-8
Title-9

More

I also have the above example setup in Plnkr here

** update** I tried the same code without using ng-view and the code works exactly as expected. So I am sure that the problem that I am encountering has to do with my usage of ng-view. An example in Pnkr setup without using ng-view is shown here

gkalpak · Accepted Answer · 2014-07-11 23:32:26Z

2

Your code is (almost) correct.

The only problem is that <a href="#" ... causes a redirection to the default view, thus re-instantiating your controller (and resetting the number of posts to 5).

In Angular, if you want to have an <a> element that gets styled like an <a>, but does nothing on click by default, use href="".

answered Jul 11, 2014 at 23:32

gkalpak

48.2k8 gold badges108 silver badges120 bronze badges

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

2 Comments

Goutham Over a year ago

Thank you so much for this. I completely missed this. Could you help me understand why the <a href="#" .. is not a problem when I don't use ng-view.

charlietfl Over a year ago

@goutham it's not an issue without ng-view because there is no routing involved

charlietfl · Accepted Answer · 2014-07-11 23:29:27Z

1

Ok what is actually happening is with the # href the click default is not being prevented and the view is refreshing since the route represented by # alone doesn't exist

You can prove this by logging to console from your getPosts function.

Several ways around it are:

remove href and set css cursor:pointer if you want it to respond the same
leave the href as it is and pass $event into the function as argument and use $event.preventDefault()
change href to empty string

Here's a working version without href

by the way, this is all within angular since you are using ng-click ... it is not an outside event

answered Jul 11, 2014 at 23:29

charlietfl

172k14 gold badges125 silver badges154 bronze badges

Collectives™ on Stack Overflow

How to append data in ng-repeat scope from outside in angularjs?

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related