NodeJS控制器，Yeoman — ng-repeat一起返回所有内容，仅使用点运算符返回特定条目 [英] NodeJS controller, Yeoman — ng-repeat returns everything together once, only returns specific entries using dot operator
问题描述
(请参阅下面的更新)
在 MEAN堆栈教程上，很难建立测试模型编码，以便通过ng-repeat在表上显示.该项目使用Yeoman进行了脚手架，使用Grunt进行了编译+服务，使用了Bower.
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.
问题:以下ng-repeat返回空白行，而不是用 Field A 和 Field B 填充它:
Issue: The following ng-repeat returns a blank row instead of populating it with Field A and Field B:
页面
<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}}和{{X.fieldB}}给出了一个空行.应该有几行.
{{ X.fieldA }} and {{ X.fieldB }} give one empty row. There should be several rows.
{{X 1 .fieldB}}在第一行中正确输出数据的第三和第二个元素，但是ng-repeat应该重复此行.
{{ 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}}和{{X}}在整个数据模型的一行两个单元格中转储:
{{ 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}]
[{"id":"1","fieldA":"Field A @ #1","fieldB":'Field B @ #1'}, {etc}, {etc} ]
硬编码数据库如下:
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'
}
];
});
由Yeoman搭建的用于管理整个网站的clientApp控制器:
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:
问题可能是该对象没有变成适当的对象.您可能想要尝试将它们转换为JSON对象，如下所示:
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>
更新: Sajeetharan的答案在他的控制台中似乎很适合他，但是由于我使用的是脚手架的Yeoman Angular应用程序，他建议声明 var app = angular.module('clientApp'，[])的建议会覆盖clientApp，浏览器将变为空白.
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.
更新2:Richard Szalay正确地提到，您可以从 var app = angular.module('clientApp'，[])中消除([])参数，因此浏览器不会空白.现在的问题是，即使ng-repeat查询{{X}}，该代码也不会产生任何结果:
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'
}];
}
]);
推荐答案
控制器出现问题
将其更改为
$scope.testModel 代替. testModel
$scope.testModel instead of this.testModel
演示
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>
这篇关于NodeJS控制器，Yeoman — ng-repeat一起返回所有内容，仅使用点运算符返回特定条目的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
