0

我在制作 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;
};
});
4

1 回答 1

0

您使用了错误的变量。
$scope.titles是一个对象数组

[ // assigned test values 
 {item: 'wkbk1 title'},
 {item: 'wkbk2 title'},
 {item: 'wkbk3 title'}]  

所以你应该用title.item而不是title来绑定数据。

<div id="List of Workbooks" ng-controller="TableauListCtrl" >
    <ul>
        <li ng-repeat="title in titles" ng-click="clickWorkbook(title)" ng-mouseover="mouseoverWorkbook(title)"> {{title.item}} </li>
    </ul>
</div>
于 2013-07-01T21:42:06.180 回答