Angular JS: ng-repeat doesn't work

Question

I am new in angular JS. And this is the first time I wrote a bit of code using Angular JS by watching a tutorial. But in that video tutorial the code works properly, but my code is not working. My web page is showing a blank page.

The index.html

<!DOCTYPE html>
<html ng-app xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>MTG Browser</title>
    <link href="index.css" rel="stylesheet" />
    <script src="angular.min.js"></script>
    <script src="CardsController.js"></script>
</head>
<body ng-controller="cardsListController">
    <div id="cardsList">
        <div ng-repeat="card in cards" class="cardItem">
            Card {{card.id}}
        </div>
    </div>
</body>
</html>

And the CardsController.js

var cardsListController = function ($scope) {
    $scope.cards = [{ id: 1 }, { id: 2 }];
};

Please someone explain why the code is not working?

Open the browser's error console. What errors do you see there? — JJJ
– JJJ, Commented Jun 29, 2015 at 12:34
Could you provide a fiddle reproducing your issue? On jsfiddle.net or plnkr.co for example. — sp00m
– sp00m, Commented Jun 29, 2015 at 12:37

Amay Kulkarni · Accepted Answer · 2015-06-29 13:02:54Z

2

Html

<html ng-app="myApp">
<head>
    <title>MTG Browser</title>
   <link href="index.css" rel="stylesheet" />
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.5/angular.min.js"></script>
<script src="script.js"></script>
</head>
<body ng-controller="cardsListController">
<div id="cardsList">
    <div ng-repeat="card in cards" class="cardItem">
        Card {{card.id}}
        </div>
</div>
</body>
</html>

and .js

angular.module('myApp', []);
var cardsListController = function ($scope) {
$scope.cards = [{ id: 1 }, { id: 2 }];
};

answered Jun 29, 2015 at 13:02

Amay Kulkarni

84814 silver badges16 bronze badges

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

Comments

amarjeet kumar · Accepted Answer · 2015-06-29 12:52:46Z

1

I have modified your code and its working.

<!DOCTYPE html>
<html>
<script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script src="CardsController.js"></script>
<body>
<div  ng-app="myApp" ng-controller="cardsListController" id="cardsList">
    <div ng-repeat="card in cards" class="cardItem">
        Card {{card.id}}
    </div>
</div>

CardsController.js

var app = angular.module('myApp', []);
app.controller('cardsListController', function($scope) {
 $scope.cards = [{ id: 1 }, { id: 2 }];
});

answered Jun 29, 2015 at 12:52

amarjeet kumar

3451 silver badge10 bronze badges

1 Comment

amarjeet kumar Over a year ago

Earlier versions of Angular allowed the ability to assign controller functions to the global scope like you did. Then this ability was removed from angular. There are still alot of tutorials around that reference this older style however. I have replaced with angular legacy and your code runs. So in the future you need to declare an angular module and register your controller against it.

Taha Amine Zeghbib · Accepted Answer · 2015-06-29 12:53:58Z

0

you need to assign a name to your ng-app as it's empty and this is deprecated in newer versions example ng-app="nameofyourapp"

answered Jun 29, 2015 at 12:53

Taha Amine Zeghbib

581 silver badge7 bronze badges

Comments

Jammi · Accepted Answer · 2015-06-29 12:55:54Z

Firstly please provide a JSFiddle, The problem maybe within the html tag, you don't really need the xmlns within the tag but if you must define it as:

      <html ng-app xmlns:ng="http://www.w3.org/1999/xhtml">

Also it's good practice to provide an identity for a angularjs app, for example:

      <html ng-app="myapp" xmlns:ng="http://angularjs.org">

Also it's good practice to put JS files at the base of the

  <script src="angular.min.js"></script>
  <script src="CardsController.js"></script>
</body>

Within your JS you must define "myApp":

   var app = angular.module('myApp', []);

Open the error window within your browser, to clearly identify the error.

Possibly the error is that angular is getting called before your JS file, you should try this:

  <script src="CardsController.js"></script>
  <script src="angular.min.js"></script>
</body>

Good Luck.

Collectives™ on Stack Overflow

Angular JS: ng-repeat doesn't work

4 Answers 4

Comments

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related