我在制作 Web 应用程序时正在学习 AngularJS。我已经阅读了教程,并从一个简单的列表开始。我不明白为什么我的浏览器只显示 {{title}}
这是我的 app.js 模块的一部分,我在其中为此列表定义了控制器:
var myApp = angular.module('myApp', []);
function TableauListCtrl ($scope, writeList) {
$scope.titles = [ // assigned test values
{item: 'wkbk1 title'},
{item: 'wkbk2 title'},
{item: 'wkbk3 title'}];
}
这是我尝试访问标题数组的html:
<div id="List of Workbooks" ng-controller="TableauListCtrl" >
<ul>
<li ng-repeat="title in titles" ng-click="clickWorkbook(title)" ng-mouseover="mouseoverWorkbook(title)"> {{title}} </li>
</ul>
</div>
所以只显示: {{title}} 而不是数组中的值。
我使用 ng-app 来指定我的 Angular 模块的名称,并在 html 的末尾使用脚本标签来包含 app.js 文件等。谁能抓住我的问题?任何帮助或见解将不胜感激,谢谢!
[编辑]
好的,在小提琴中查看时确实可以自行修复。我现在正在尝试创建一个服务来为我制作列表。我在语法中遗漏了什么吗?现在,呈现的 html 中没有显示任何内容。这是模块、控制器和服务定义,它们当前都在一个文件中。
var app = angular.module('myApp', []);
function TableauListCtrl($scope, writeList) {
$scope.titles = writeList.readTitles();
}
app.service('writeList', function () {
this.addTitle = function (title, titles) {
titles.push(title);
};
this.readTitles = function () {
var titles = [];
for (var i = 0; i < 5; i++) {
var title = "title " + i;
addTitle(title, titles);
}
return titles;
};
});