Web Flash Web Flash - 3 months ago 9
AngularJS Question

Why ng-repeat is not working correctly?

I am looping an array with

ng-repeat
but it only displays what is write in
{{ }}
.

There is not any error in the console though it's not displaying properly...
Here is the code

<html ng-app="mittens">
<head>
<title>Mittens</title>
<link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.min.css">
<script type="text/javascript" href="angular.min.js"></script>
<script type="text/javascript" href="mittens.js"></script>

</head>
<body ng-controller="mittensController">
<div class="container">

<h3 ng-repeat="meow in meows">{{meow}}</h3>

</div>
</body>


Here is mittens.js file..

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

app.controller('mittensController',function($scope){

$scope.meows = [{
'This is first sentence',
'This is second sentence',
'This is third sentence',
'This is fourth sentence'
}];

});

Answer

Actually the reference link for mittens.js is wrongly loaded. You should use src instead of href

HTML:

<html ng-app="mittens">
    <head>
        <title>Mittens</title>
        <link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.min.css">
        <script type="text/javascript" href="angular.min.js"></script>
        <script src="mittens.js"></script>

    </head>
    <body ng-controller="mittensController">
        <div class="container">

            <h3 ng-repeat="meow in meows">{{meow}}</h3>
        </div>
</body> 

Script:

    var app = angular.module('mittens',[]);
            app.controller('mittensController',function($scope){

                $scope.meows = [
                    'This is first sentence',
                    'This is second sentence',
                    'This is third sentence',
                    'This is fourth sentence'
                ]; //removed {} braces
            });

UPDATE: here is the Plunker link if you want to reference.

Comments