javascript Angular JS：ng-repeat 不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/31115770/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Angular JS: ng-repeat doesn't work
提问by Noushadur Rahman Shoukhin
I am new in angular JS. And this is the first time I wrote a bit of code using Angular JS by watching a tutorial. But in that video tutorial the code works properly, but my code is not working. My web page is showing a blank page.
我是 Angular JS 的新手。这是我第一次通过观看教程使用 Angular JS 编写一些代码。但是在该视频教程中，代码可以正常工作，但我的代码无法正常工作。我的网页显示空白页。
The index.html
该index.html的
<!DOCTYPE html>
<html ng-app xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>MTG Browser</title>
<link href="index.css" rel="stylesheet" />
<script src="angular.min.js"></script>
<script src="CardsController.js"></script>
</head>
<body ng-controller="cardsListController">
<div id="cardsList">
<div ng-repeat="card in cards" class="cardItem">
Card {{card.id}}
</div>
</div>
</body>
</html>
And the CardsController.js
和CardsController.js
var cardsListController = function ($scope) {
$scope.cards = [{ id: 1 }, { id: 2 }];
};
Please someone explain why the code is not working?
请有人解释为什么代码不起作用？
回答by Amay Kulkarni
Html
html
<html ng-app="myApp">
<head>
<title>MTG Browser</title>
<link href="index.css" rel="stylesheet" />
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.5/angular.min.js"></script>
<script src="script.js"></script>
</head>
<body ng-controller="cardsListController">
<div id="cardsList">
<div ng-repeat="card in cards" class="cardItem">
Card {{card.id}}
</div>
</div>
</body>
</html>
and .js
和 .js
angular.module('myApp', []);
var cardsListController = function ($scope) {
$scope.cards = [{ id: 1 }, { id: 2 }];
};
回答by amarjeet kumar
I have modified your code and its working.
我已经修改了您的代码及其工作。
<!DOCTYPE html>
<html>
<script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script src="CardsController.js"></script>
<body>
<div ng-app="myApp" ng-controller="cardsListController" id="cardsList">
<div ng-repeat="card in cards" class="cardItem">
Card {{card.id}}
</div>
</div>
CardsController.js
卡片控制器.js
var app = angular.module('myApp', []);
app.controller('cardsListController', function($scope) {
$scope.cards = [{ id: 1 }, { id: 2 }];
});
回答by Taha Amine Zeghbib
you need to assign a name to your ng-app as it's empty and this is deprecated in newer versions example ng-app="nameofyourapp"
您需要为您的 ng-app 分配一个名称，因为它是空的，这在较新的版本中已被弃用，例如 ng-app="nameofyourapp"
回答by Jammi
Firstly please provide a JSFiddle, The problem maybe within the html tag, you don't really need the xmlns within the tag but if you must define it as:
首先请提供一个 JSFiddle，问题可能出在 html 标签内，您并不真正需要标签内的 xmlns，但如果您必须将其定义为：
<html ng-app xmlns:ng="http://www.w3.org/1999/xhtml">
Also it's good practice to provide an identity for a angularjs app, for example:
为 angularjs 应用程序提供身份也是一种很好的做法，例如：
<html ng-app="myapp" xmlns:ng="http://angularjs.org">
Also it's good practice to put JS files at the base of the
将 JS 文件放在
<script src="angular.min.js"></script>
<script src="CardsController.js"></script>
</body>
Within your JS you must define "myApp":
在您的 JS 中，您必须定义“myApp”：
var app = angular.module('myApp', []);
Open the error window within your browser, to clearly identify the error.
在浏览器中打开错误窗口，以清楚地识别错误。
Possibly the error is that angular is getting called before your JS file, you should try this:
可能的错误是 angular 在你的 JS 文件之前被调用，你应该试试这个：
<script src="CardsController.js"></script>
<script src="angular.min.js"></script>
</body>
Good Luck.
祝你好运。
