Estoy repitiendo una matriz con ng-repeat pero solo muestra lo que está escrito en {{ }}.

No hay ningún error en la consola aunque no se muestra correctamente ... Aquí está el código

    <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>

Aquí está el archivo mittens.js ..

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'
        }];

    });
1
Web Flash 15 ago. 2016 a las 10:28

2 respuestas

La mejor respuesta

En realidad, el enlace de referencia para mittens.js está cargado incorrectamente. Deberías usar src en lugar de 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> 

Guión:

    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
            });

ACTUALIZACIÓN: aquí está el enlace de Plunker si desea hacer referencia.

1
Smit 15 ago. 2016 a las 07:53

La directiva ng-repeat funciona en una matriz o en un objeto, pero está intentando trabajar en una matriz con un solo objeto que también está definido incorrectamente.

Un objeto Javascript se define como: {foo: 'Some bar', bar: 'Some foo'}

Así que intente cambiar su código de la siguiente manera:

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

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

  $scope.meows = [    // <<< remove bracket from here
    'This is first sentence',
    'This is second sentence',
    'This is third sentence',
    'This is fourth sentence'
  ];   // <<< also remove from here

});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="mittens" ng-controller="mittensController">
  <div class="container">

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

  </div>
</div>
1
Shashank Agrawal 15 ago. 2016 a las 08:02