CODEWITHSUNDEEP
javascriptangularjs
Goutham
Goutham

Reputation: 2059

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

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

More

(2)

Home View

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

Upvotes: 0

Views: 1357

Answers (2)

gkalpak
gkalpak

Reputation: 48211

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="".

Upvotes: 2

charlietfl
charlietfl

Reputation: 171698

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

Upvotes: 1

Related Questions