ng-repeat的角度误差
[英]Angular error with ng-repeat
问题描述
最近三个小时，我做了一个小应用程序。 还没有准备好，但是有错误。 我不知道怎么了。
这是我的HTML：
<html lang="en" ng-app="reporting">
<head>
<meta charset="utf-8" />
<title>.reporting</title>
<!-- BOOTSTRAP -->
<link href="Content/bootstrap.css" rel="stylesheet" />
<!-- BOOTSTRAP -->
<!-- JQUERY -->
<script src="Scripts/jquery-2.1.4.js"></script>
<!-- JQUERY -->
<!-- EDITOR -->
<script src="Scripts/wysihtml5-editor/bootstrap3-wysihtml5.all.min.js"></script>
<link href="Scripts/wysihtml5-editor/bootstrap3-wysihtml5.css" rel="stylesheet" />
<script src="Scripts/wysihtml5-editor/bootstrap3-wysihtml5.min.js"></script>
<!-- EDITOR -->
<!-- ANGULAR -->
<script src="Scripts/angular.js"></script>
<!-- ANGULAR -->
<!-- CUSTOM -->
<link href="css/app.css" rel="stylesheet" />
<link href='http://fonts.googleapis.com/css?family=Abel' rel='stylesheet' type='text/css'>
<!--<script src="js/init.js"></script>-->
<script src="js/controller.js"></script>
<!-- CUSTOM -->
</head>
<body>
<div id="top" class="row">
<div id="treecontainer" class="col-md-4" ng-controller="TreeController as treeCtrl">
<header>
<h2>Übersicht, {{treeCtrl.text}}, {{2 + 2}}</h2>
</header>
<content id="tree">
<ul ng-repeat="knoten in treeCtrl.treedata">
<li>H: {{knoten.name}}</li>
</ul>
</content>
</div>
</body>
</html>
这是我的controller.js：
(function () {
var reportapp = angular.module('reporting', []);
reportapp.controller('TreeController', ['$http', '$scope', function ($http, $scope) {
$scope.treedata = [{
"name": "Titel",
"id": "1"
},
{
"name": "Allgemeine Standardangaben",
"id": "2"
}];
$scope.text = "Hallo";
$http.get('../data/tree.json').success(function (data) {
$scope.treedata = data;
console.log($scope.treedata);
});
}]);
})();
问题是，我的HTML中的ng-repeat无法呈现。 content标记后的空白。 标题中的{{treeCtrl.text}}也不会呈现。 范围可能有什么问题吗？ 我看了两个小时的解决方案，但无法想象，那会是什么...
感谢您的建议。
解
这是我的工作代码。 希望这会帮助某人：
index.html：
...
<div id="treecontainer" class="col-md-4" ng-controller="TreeController as treeCtrl">
<header>
<h2>Übersicht, {{treeCtrl.text}}</h2>
</header>
<content id="tree">
<ul ng-repeat="knoten in treedata">
<li>{{knoten.name}}</li>
</ul>
</content>
</div>
...
和controller.js：
(function () {
var reportapp = angular.module('reporting', []);
reportapp.controller('TreeController', ['$http', '$scope', function ($http, $scope) {
$scope.treedata = [];
$scope.text = "Hallo";
$http.get('../data/tree.json').success(function (data) {
$scope.treedata = data;
});
}]);
})();
谢谢大家。
3 个解决方案
解决方案1
0 已采纳 2015-05-29 15:52:59
看起来您需要稍微更改标记。 观察以下变化...
<ul ng-repeat="knoten in treeCtrl.treedata">
=>
<ul ng-repeat="knoten in treedata">
treedata已经在$scope上定义了。 无需调用treeCtrl 。 同样，对于text也是如此。 只需将{{ text }}放入您的标记中即可。
此外，需要利用controllerName.value语法的时候就是在this定义值而不是$scope 。 例如...
reportapp.controller('TreeController', ['$http', '$scope', function ($http, $scope) {
this.treedata = []; // -- notice this.
....
然后，我们将需要您首先在标记中尝试过的语法。 坚持使用$scope ，您将不需要它，也可以重构以使用this 。 请参阅此博客文章- 深入研究Angular的“ Controller as”语法，以进一步了解该主题
解决方案2
0 2015-05-29 16:02:15
在上述答案的基础上，如果要使用控制器作为Synatax，则可以执行以下操作：
var vm = this;
vm.treedata = [{
"name": "Titel",
"id": "1"
}, {
"name": "Allgemeine Standardangaben",
"id": "2"
}];
vm.text = "Hallo";
解决方案3
0 2015-05-29 16:05:49
您的代码似乎封装在(function(){})() 。 我认为这导致您根本无法执行角度代码。 尝试将角度代码直接放入controller.js。
当您将其放在此处时，代码实际上正在等待调用此函数，以便视图可以访问该代码。
角度ng-repeat错误
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.