NodeJS controller, Yeoman — ng-repeat returns everything together once, only returns specific entries using dot operator

问题

(See below the updates)

On this MEAN stack tutorial, a test model is hard-coded to be displayed via ng-repeat on a table. The project was scaffolded using Yeoman, compiles + serves with Grunt and uses Bower.

Issue: The following ng-repeat returns a blank row instead of populating it with Field A and Field 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 }} and {{ X.fieldB }} give one empty row. There should be several rows.

{{ X2.fieldA }} and {{ X1.fieldB }} outputs in 1 row the third and second elements of the data correctly, but ng-repeat should repeat this row.

{{ X }} and {{ X }} dumps in two cells of one row the whole data model:

[{"id":"1","fieldA":"Field A @ #1","fieldB":'Field B @ #1'}, {etc}, {etc} ]

The hardcoded database is the following:

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

The clientApp controller that manages the entirety of the site, as scaffolded by 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('');
  });

I have searched for similar issues and came across this answered question here: ng-repeat not showing list of JSON array in AngularJS 1.5, but I can see values individually. I cannot yet comment on answers there for implementation clarifications, but one answer mentions:

The problem might be that the object aren't turned into propper objects. You might wanna try to turn them into JSON objects, like so:

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

And then in the view

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

Update: Sajeetharan's answer seems to work for him in his console, but since I am using a scaffolded Yeoman Angular app, his suggestion of declaring var app = angular.module('clientApp', []) overrides the clientApp and the browser goes blank.

Update 2: Richard Szalay rightfully mentions that you can eliminate the ([]) argument from var app = angular.module('clientApp', []), so the browser does not go blank. The issue now is that this code does not yield any results, even when ng-repeat queries {{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'
     }];
   }
 ]);

回答1:

You are having problems with the controller,

Change it as

$scope.testModel instead of this.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>

来源：https://stackoverflow.com/questions/41337951/nodejs-controller-yeoman-ng-repeat-returns-everything-together-once-only-ret

标签

angularjs

node.js

model-view-controller

mean-stack

yeoman-generator-angular