ng-repeat does not work on Angular JS

Question

I have created a controller (movies.js) as below-

'use strict';
angular.module('clientApp')
  .controller('MoviesCtrl', function ($scope) {
    $scope.movies = [
        {
        title:'Star Wars!',
        url:'http://www.google.com'
        },
        {
        title: 'Star Wars2!',
        url: 'http://www.google.com'
        },
        {
        title: 'Star Wars3!',
        url: 'http://www.google.com'
        }
    ];
  });

Now I'm trying to access the values of each objects using ng-repeat in movies.html-

<table class="table table-striped">
<thead>
    <th>Title</th>
    <th>URL</th>    
</thead>
<tbody>
<tr ng-repeat="movie in movies">
<td> {{ movie.title }} </td>
<td> {{ movie.url }} </td>
</tr>
</tbody>
</table>

However, the values are not populated as expected. Can someone please provide any tips on where should I look to fix it?

Did you specify ng-controller and ng-app in your html markup? — logee
– logee, Commented Aug 27, 2015 at 4:41

Arun P Johny · Accepted Answer · 2015-08-27 04:33:23Z

Since you are assigning the array to this so

var app = angular.module('my-app', [], function() {})

app.controller('AppController', function($scope) {
  this.movies = [{
    title: 'Star Wars!',
    url: 'http://www.google.com'
  }, {
    title: 'Star Wars2!',
    url: 'http://www.google.com'
  }, {
    title: 'Star Wars3!',
    url: 'http://www.google.com'
  }];
})

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="my-app">
  <div ng-controller="AppController as ctrl">
    <table class="table table-striped">
      <thead>
        <th>Title</th>
        <th>URL</th>
      </thead>
      <tbody>
        <tr ng-repeat="movie in ctrl.movies">
          <td>{{ movie.title }}</td>
          <td>{{ movie.url }}</td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

Or assign the array to the scope variable

var app = angular.module('my-app', [], function() {})

app.controller('AppController', function($scope) {
  $scope.movies = [{
    title: 'Star Wars!',
    url: 'http://www.google.com'
  }, {
    title: 'Star Wars2!',
    url: 'http://www.google.com'
  }, {
    title: 'Star Wars3!',
    url: 'http://www.google.com'
  }];
})

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="my-app">
  <div ng-controller="AppController">
    <table class="table table-striped">
      <thead>
        <th>Title</th>
        <th>URL</th>
      </thead>
      <tbody>
        <tr ng-repeat="movie in movies">
          <td>{{ movie.title }}</td>
          <td>{{ movie.url }}</td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

The Mechanic · Accepted Answer · 2015-08-27 04:32:14Z

0

You should try this

'use strict';
angular.module('validationApp' ,[])
  .controller('MoviesCtrl', function ($scope) {
    $scope.movies = [
        {
        title:'Star Wars!',
        url:'http://www.google.com'
        },
        {
        title: 'Star Wars2!',
        url: 'http://www.google.com'
        },
        {
        title: 'Star Wars3!',
        url: 'http://www.google.com'
        }
    ];
});

answered Aug 27, 2015 at 4:32

The Mechanic

2,3391 gold badge28 silver badges37 bronze badges

Comments

Jairo Malanay · Accepted Answer · 2015-08-27 04:32:32Z

0

it should be

<table class="table table-striped">
<thead>
    <th>Title</th>
    <th>URL</th>    
</thead>
<tbody>
<tr ng-repeat="movie in MoviesCtrl.movies">
<td> {{ movie.title }} </td>
<td> {{ movie.url }} </td>
</tr>
</tbody>
</table>

or you should bind it to $scope.movies

answered Aug 27, 2015 at 4:32

Jairo Malanay

1,3479 silver badges13 bronze badges

Comments

Nikhil Maheshwari · Accepted Answer · 2015-08-27 04:36:16Z

0

Still you won't be able to load external URLs. You need to make a filter to whitelist the external links. Refer below code.

angular.module('myApp')
  .filter('trustUrl', function ($sce) {
    return function(url) {
    return $sce.trustAsResourceUrl(url);
  };
});

<td> {{ movie.url | trustUrl}} </td>

answered Aug 27, 2015 at 4:36

Nikhil Maheshwari

2,24821 silver badges26 bronze badges

Comments

Matt Way · Accepted Answer · 2015-08-27 04:37:42Z

0

You need to inject $scope into your controller, and use that to bind your array to your view

.controller('MoviesCtrl', function($scope){
    $scope.movies = [
        {
            title:'Star Wars!',
            url:'http://www.google.com'
        },{
            title: 'Star Wars2!',
            url: 'http://www.google.com'
        },{
            title: 'Star Wars3!',
            url: 'http://www.google.com'
        }
    ];
});

Also, don't forget that you need to specify in your view that there is a controller you want to use. For example, in your html:

<div ng-controller="MoviesCtrl">
    <!-- any html you associate with your controller -->
</div>

edited Aug 27, 2015 at 4:37

answered Aug 27, 2015 at 4:32

Matt Way

33.3k10 gold badges85 silver badges86 bronze badges

Collectives™ on Stack Overflow

ng-repeat does not work on Angular JS

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related