angular.js ng-repeat 似乎不起作用

Question

我正在使用 angular.js 版本 1.7.2 我有以下代码

html

<div class="container" ng-app="booksApp"  ng-controller="booksController">
    <div class="starter-template">
        <h1>My Book Catalogue</h1>
         <table class="table">
            <thead>
                <tr><th>Title</th><th>Author</th><th>Year</th><th>Language</th></tr>
            </thead>
            <tbody>
                <tr ng-repeat="book in books">
                     <td>{{ book.title }}</td>
                     <td>{{ book.author }}</td>
                     <td>{{ book.year }}</td>
                     <td>{{ book.language }}</td> 
                </tr>
            </tbody>
        </table> 


    </div>
</div>

在我的 app.js 中，我有以下内容：

books = [{'title': 'Finnegans Wake', 'author': 'Janes Joyce', 'language': 'English', 'Year': '1941'},
         {'title': 'Don Quixote', 'author': 'Miguel De Cervantes', 'language': 'Spanish', 'Year': '1615'}
];
angular.module('booksControllers',[]).
            controller('booksController', function($scope){
   $scope.books = books;  
}
})
var booksApp = angular.module('booksApp',[
            'booksControllers',
            'ui.filters'
        ]);

书籍数组有 2 个对象。 ng-repeat 迭代了两次，但值为空。 {{book.title }} 和其他书籍元素具有空白值。

我是不是漏掉了什么？

Answer 1

尝试此操作时，当我将数组向下移动到控制器中时，代码可以正常工作：

var booksApp = angular.module('booksApp',[
            'booksControllers',
            'ui.filters'
        ]);

 angular.module('booksControllers',[]).
            booksApp.controller('booksController', function($scope){
 $scope.books = [{'title': 'Finnegans Wake', 'author': 'Janes Joyce', 'language': 'English', 'Year': '1941'}, {'title': 'Don Quixote', 'author': 'Miguel De Cervantes', 'language': 'Spanish', 'Year': '1615'} ];
}
})

看看这对你有用吗？

Answer 2

如果您的 app.js 是这样，您必须在 html 文件中添加 <html ng-app="myapp">。参考 this

 var app = angular.module('myapp', []);

        books = [{'title': 'Finnegans Wake', 'author': 'Janes Joyce', 'language': 'English', 'Year': '1941'},
                 {'title': 'Don Quixote', 'author': 'Miguel De Cervantes', 'language': 'Spanish', 'Year': '1615'}
        ];
        app.controller('BaseController', function($scope) {
          $scope.content = 'Hello World';
           $scope.books = books;  
        });


        var booksApp = angular.module('booksApp',[
                    'BaseController',
                    'ui.filters'
                ]);

Answer 3

你的代码中有两个小问题，第一个你有一个额外的}，第二个你需要在控制器顶部声明你的Angular模块名称。

    books = [{
  'title': 'Finnegans Wake',
  'author': 'Janes Joyce',
  'language': 'English',
  'Year': '1941'
}, {
  'title': 'Don Quixote',
  'author': 'Miguel De Cervantes',
  'language': 'Spanish',
  'Year': '1615'
}];

var booksApp = angular.module('booksApp', ['booksControllers']);

angular.module('booksControllers', []).
controller('booksController', function($scope) {
  $scope.books = books;
})

我也在 Plnkr运行上

https://plnkr.co/edit/XliyEV1leyugSl9gXpnk?p=preview

Answer 4

我实际上是在编写代码而不是 html 文件，而是 .twig 文件。我发现我可以通过使用

来阻止 twig 处理块

{% verbatim %}
{% endverbatim %}

我添加了这个，现在 angular.js 按预期工作。对不起，我没有准确地提到这个问题。

angular.js ng-repeat 似乎不起作用

angular.js ng-repeat does not seem to be working

angularjs

angularjs-ng-repeat