ng-repeat 不适用于 ng-app 值答案

【问题标题】：ng-repeat is not working with ng-app valueng-repeat 不适用于 ng-app 值
【发布时间】：2016-02-15 20:04:12
【问题描述】：

当我们给出ng-app="MyApp" 时，指令ng-repeat 无法正常工作，并且它在没有向ng-app 指令传递任何值的情况下工作，这对我来说是一种奇怪的行为。我是 AngularJS 的新手。这是预期的行为吗？

请对此有所了解。

<!DOCTYPE html>
<html>
  <head>
    <title>Books Buddy</title>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
  </head>
  <body ng-app="MyApp">
    <div ng-init="books=['EffectiveJava','ServletBlackbook','CodeCleaner','HeadFirstJava']">
      <ul>
        <li ng-repeat="book in books">{{book}}</li>
      </ul>
    </div>
  </body>
</html>

【问题讨论】：

添加你的 angular.module 代码。
是的，这就是 Angular 的工作方式......因为你在 html 中初始化你的数组，所以你不需要声明任何应用程序名称......在其他情况下，如果你是通过控制器启动您的阵列，因此您需要制作一个自定义应用程序并在控制器内工作...
感谢@AkshayKumar 的回复，所以这意味着即使我尝试了一些像 ng-model 这样的小操作，ng-app 也不应该包含 ng-app="myApp" 对吧？跨度>
是的，您也可以尝试 ng-model 而无需声明任何应用程序名称...但我建议您制作自己的自定义应用程序...因为它是最佳实践...
如果你不通过angular.module('MyApp', []);提供东西，你不能在ng-app中使用命名应用程序

标签： angularjs ng-repeat ng-app

【解决方案1】：

如果只使用 ngInit 而没有控制器、指令或服务，则不需要 ngApp。这就是角度的工作原理。如果您将 MyApp 指定为 ngApp 角度将无法找到它，那么您会收到错误。

【讨论】：

【解决方案2】：

只是男性 ng-app='' 它应该可以工作

<!DOCTYPE html>
<html>
<head><title>Books Buddy</title></head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.js"></script>
<body ng-app="">
 <div ng-init="books=['EffectiveJava','ServletBlackbook','CodeCleaner','HeadFirstJava']">
 <ul>
   <li ng-repeat="book in books">{{book}}
   </li>
 </ul>
 </div>
</body>
</html>

【讨论】：

【解决方案3】：

这是你的方式（这里我们只在 html 中做所有事情，所以我们不需要自定义应用程序。我们可以说“嘿，Angular 做你能做的事情”）

<!DOCTYPE html>
<html>
<head><title>Books Buddy</title></head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body ng-app>
 <div ng-init="books=['EffectiveJava','ServletBlackbook','CodeCleaner','HeadFirstJava']">
 <ul>
   <li ng-repeat="book in books">{{book}}
   </li>
 </ul>
 </div>
</body>
</html>

这是正确的方式（在此我们声明了我们自己的应用程序，因此我们需要为我们的应用程序设置一个名称..）

<!DOCTYPE html>
<html>
<head><title>Books Buddy</title></head>
<body ng-app = "myApp">
 <div ng-controller="mainCtrl">
 <ul>
   <li ng-repeat="book in books">{{book}}</li>
 </ul>
 </div>
</body>

<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script type="text/javascript">
    var app = angular.module("myApp", []);

    app.controller("mainCtrl", function($scope){
        $scope.books = ['EffectiveJava','ServletBlackbook','CodeCleaner','HeadFirstJava'];
    });

</script>
</html>

【讨论】：

【解决方案4】：

在书籍上使用ng-model，这里不需要写ng-app="myApp"因为你没有单独初始化你的应用程序，上面的代码不是那么动态，所以你可以直接使用ng-app

试试这个：

<!DOCTYPE html>
<html>
<head>
<title>Books Buddy</title>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js">    </script>
</head>
<body ng-app >
<div ng-init="books=['EffectiveJava','ServletBlackbook','CodeCleaner','HeadFirstJava']">
 <div ng-model="books" >
  <ul ng-repeat="book in books" >
    <li>{{book}}</li>
  </ul>
</div>
</div>
</body>
</html>

【讨论】：