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'
        ]);

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

我想念什么吗？

Answer 1

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

来阻止树枝处理块

{% verbatim %}
{% endverbatim %}

我添加了此内容，现在angular.js可以按预期工作。抱歉，我没有正确提到问题。

Answer 2

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

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 3

如果您的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 4

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

    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

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

4 个答案: