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 回答