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 には何も表示されていません。モジュール、コントローラー、およびサービスの定義は次のとおりです。現在、これらはすべて 1 つのファイルにあります。
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;
};
});