(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'
}];
}
]);
You are having problems with the controller,
Change it as
$scope.testModelinstead of this.testModelDEMO