de NodeJS, Yeoman - retourne ng répétition tout ensemble une fois, ne retourne des entrées spécifiques utilisant l'opérateur de points

(Voir ci-dessous les mises à jour)de NodeJS, Yeoman - retourne ng répétition tout ensemble une fois, ne retourne des entrées spécifiques utilisant l'opérateur de points

Sur cette MEAN stack tutorial, un modèle de test est codé en dur à afficher via ng- répétez sur une table. Le projet a été échafaudé en utilisant Yeoman, compile + sert avec Grunt et utilise Bower.

Problème: Le ng répétition suivant retourne une ligne vide au lieu de le peuplant avec Champ A et Champ B:

page

<body ng-app="clientApp" class="ng-scope"> 
    <div ng-view class="ng-scope"> 
    <table> 
     <thead> 
     <th>Field A</th> 
     <th>Field B</th> 
     </thead> 
    <tbody> 
     <tr ng-repeat="X in testModel"> 
     <td>{{ X.fieldA }}</td> 
     <td>{{ X.fieldB }}</td> 
     </tr> 
    </tbody> 
    </table> 
</div>

{{X. fieldA}} et {{X.fieldB}} donnent une ligne vide. Il devrait y avoir plusieurs rangées.

{{X 2 .fieldA}} et {{X 1 .fieldB}} affiche en 1 ligne les troisième et deuxième éléments des données correctement, mais ng-repeat doit répéter cette ligne.

{{X}} et {{X}} déverse dans deux cellules de une rangée l'ensemble du modèle de données:

[{ "id": "1", "FieldA": » Un champ @ # 1" , "FieldB": 'champ B @ # 1'}, {etc}, {etc}]

La base de données est codé en dur les suivantes:

testModel.js

'use strict'; 

/** 
* @ngdoc function 
* @name clientApp.controller:TestCtrl 
* @description 
* # TestCtrl 
* Controller of the clientApp 
*/ 

angular.module('clientApp') 
    .controller('TestCtrl', function() { 
    this.testModel = [ 
    { 
     id:'1', 
     fieldA: 'Field A @ #1', 
     fieldB: 'Field B @ #1' 
    }, 
    { 
     id:'2', 
     fieldA: 'Field A @ #2', 
     fieldB: 'Field B @ #2' 
    }, 
    { 
     id:'3', 
     fieldA: 'Field A @ #3', 
     fieldB: 'Field B @ #3' 
    } 
    ]; 
    });

Le contrôleur ClientApp qui gère l'intégralité du site, comme échafaudés par Yeoman:

app.js

'use strict'; 
/** 
* @ngdoc overview 
* @name clientApp 
* @description 
* # clientApp 
* 
* Main module of the application. 
*/ 

angular 
    .module('clientApp', [ 
    'ngRoute' 
    ]) 
    .config(function ($routeProvider, $locationProvider) { 
    $routeProvider 
     .when('/', { 
     templateUrl: 'views/main.html', 
     controller: 'MainCtrl', 
     controllerAs: 'main' 
     }) 
     .when('/about', { 
     templateUrl: 'views/about.html', 
     controller: 'AboutCtrl', 
     controllerAs: 'about' 
     }) 
     .when('/test', { 
     templateUrl: 'views/test.html', 
     controller: 'TestCtrl', 
     controllerAs: 'test' 
     }) 
     .otherwise({ 
     redirectTo: '/' 
     }); 

     $locationProvider.hashPrefix(''); 
    });

J'ai cherché des questions similaires et suis tombé sur cette question ici a répondu : . Je ne peux pas encore commenter les réponses il y a des clarifications de mise en œuvre, mais one answer mentions:

Le problème est peut-être que l'objet ne sont pas transformés en objets propper. Vous voudrez peut-être essayer de les transformer en objets JSON, comme ceci:

for(var i = 0; i < recipes.length; i++){ 
    recipesArray.push(JSON.parse(recipes[i])); 
} 
$scope.recipes = recipesArray;

Et puis dans la vue

<ul ng-repeat="recipe in recipes"> 
    <li>{{recipe.name}}</li> 
</ul>

Mise à jour: Sajeetharan's answer semble travailler pour lui dans sa console , mais puisque j'utilise une application Yeoman Angular échafaudée, sa suggestion de déclarer var app = angular.module ('clientApp', []) annule l'application client et le navigateur devient vide.

Mise à jour 2: Richard Szalay mentionne à juste titre que vous pouvez éliminer le ([]) argument var app = angular.module ('ClientApp', []), de sorte que le navigateur ne va pas vide. La question est maintenant que ce code ne donne aucun résultat, même lorsque les requêtes répétées {ng-{X}}:

testModel.js

var app = angular.module('clientApp'); 

app.controller('LearnCtrl', ['$scope', 
    function($scope) { 
    $scope.learn = [{ 
     id: '1', 
     fieldA: 'Field A @ #1', 
     fieldB: 'Field B @ #1' 
    }, { 
     id: '2', 
     fieldA: 'Field A @ #2', 
     fieldB: 'Field B @ #2' 
    }, { 
     id: '3', 
     fieldA: 'Field A @ #3', 
     fieldB: 'Field B @ #3' 
    }]; 
    } 
]);

Source

2016-12-27 Eamon Bohan

Vous rencontrez des problèmes avec le contrôleur,

Modifier comme

$scope.testModel au lieu de cela. testModel

DEMO

var app = angular.module("clientApp", []) 
 

 
app.controller("TestCtrl", ["$scope", 
 
    function($scope) { 
 
    $scope.testModel = [{ 
 
     id: '1', 
 
     fieldA: 'Field A @ #1', 
 
     fieldB: 'Field B @ #1' 
 
    }, { 
 
     id: '2', 
 
     fieldA: 'Field A @ #2', 
 
     fieldB: 'Field B @ #2' 
 
    }, { 
 
     id: '3', 
 
     fieldA: 'Field A @ #3', 
 
     fieldB: 'Field B @ #3' 
 
    }]; 
 
    } 
 
]);

<!doctype html> 
 
<html > 
 

 
<head> 
 
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script> 
 
    <script src="script.js"></script> 
 
</head> 
 

 
<body ng-app="clientApp"> 
 
    <div ng-controller="TestCtrl"> 
 
    <table class="table table-striped"> 
 
     <thead> 
 
     <th>Field A</th> 
 
     <th>Field B</th> 
 
     </thead> 
 
     <tbody> 
 
     <tr ng-repeat="X in testModel"> 
 
      <td>{{X.fieldA}}</td> 
 
      <td>{{X.fieldB}}</td> 
 
     </tr> 
 
     </tbody> 
 
    </table> 
 

 
    </div> 
 
</body> 
 

 
</html>

Source

2016-12-27 01:49:31 Sajeetharan

changement comme app.controller ("TestCtrl", la fonction (portée de $) { – Sajeetharan

La question que j'ai à essayer cette solution est que ** var app = angular.module ('clientApp', []) ** annule quelque chose à propos de l'application que Yeoman a déjà échafaudée, de sorte que même si elle compile, la page deviendra vide ... Hmm ... –

marquer comme réponse si cela a aidé – Sajeetharan

de NodeJS, Yeoman - retourne ng répétition tout ensemble une fois, ne retourne des entrées spécifiques utilisant l'opérateur de points

Répondre

Questions connexes