AngularJS 不解析对象数组答案

【问题标题】：AngularJS Doesn't Resolve An Array of ObjectsAngularJS 不解析对象数组
【发布时间】：2017-03-17 17:15:02
【问题描述】：

我是 Angular 的新手，所以如果问题很愚蠢，请原谅我。

这是我的 HTML：

<body data-ng-app="App">
*
*
*

<div ng-controller="Ctrl">
     <p>{{obj.desc}}</p>
</div>

*
*
*
</body>

app.js

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

controller.js

app.controller('Ctrl', [$scope, function($scope) {
    $scope.obj = [
          {
                intro: "intromessage",
                desc: "desc"
          },
          {
                intro: "intromessage2",
                desc: "desc"
          }
       ];
   }]);

我没有从key 获得value。在这种情况下，我没有收到来自 desc 的任何信息，只是一个控制台错误。

编辑：我已经尝试了以下建议的所有内容。我确实在正文中输入了data-ng-app，这是我收到的完整错误：

错误：[$injector:modulerr] http://errors.angularjs.org/1.5.7/$injector/modulerr?p0=myApp&p1=%5B%24injector%3Anomod%5D%20http%3A%2F%2Ferrors.angularjs.org%2F1.5.7%2F%24injector%2Fnomod%3Fp0%3DmyApp%0AO%2F %3C%40https%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.5.7%2Fangular.min.js%3A6%3A412%0Ale%2F%3C%2F%3C%2F%3C%40https %3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.5.7%2Fangular.min.js%3A25%3A72%0Ab%40https%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs %2F1.5.7%2Fangular.min.js%3A24%3A115%0Ale%2F%3C%2F%3C%40https%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.5.7%2Fangular.min .js%3A24%3A358%0Ag%2F%3C%40https%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.5.7%2Fangular.min.js%3A39%3A374%0Ar%40https%3A %2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.5.7%2Fangular.min.js%3A7%3A353%0Ag%40https%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1 .5.7%2Fangular.min.js%3A39%3A222%0Adb%40https%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.5.7%2Fangular.min.js%3A43%3 A246%0ABc%2Fc%40https%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.5.7%2Fangular.min.js%3A20%3A359%0ABc%40https%3A%2F%2Fajax.googleapis。 com%2Fajax%2Flibs%2Fangularjs%2F1.5.7%2Fangular.min.js%3A21%3A163%0Age%40https%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.5.7%2Fangular.min。 js%3A19%3A484%0A%40https%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.5.7%2Fangular.min.js%3A315%3A135%0Ab%40https%3A%2F%2Fajax。 googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.5.7%2Fangular.min.js%3A189%3A161%0ASf%40https%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.5.7%2Fangular。 min.js%3A37%3A31%0ARf%2Fd%40https%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.5.7%2Fangular.min.js%3A36%3A486%0A 一个

这可能是一件小事，但我花了整个上午的时间试图弄清楚..

编辑 2：我通过将控制器放在定义应用程序的同一文件中解决了这个问题 - app.js。当放置在单独的文件夹中时，它不起作用。我现在不知道为什么。

【问题讨论】：

标签： javascript jquery html angularjs

【解决方案1】：

你刚刚在这里犯了一个嘘声，一个初学者的错误，但不是一个大错误。

1.错误

您在控制台中看到的大堆栈错误是因为您以错误的方式在数组中注入了作用域。

app.controller('Ctrl', [$scope, function($scope) {

只需将其添加到单引号中，即可将其更改为 app.controller('Ctrl', ['$scope', function($scope) {。

在编写更好的控制器时遵循这种依赖注入，当您想要缩小 JS 时，这是一个很好的做法。

2。错误

$scope.obj 是一个数组，因此您无法通过简单地执行 {{obj.desc}} 来访问其中的项目，您需要的是 {{obj[0].desc}}，但如果您想访问数据中的所有对象，您可以使用 ng-repeat，如下所示

<p ng-repeat="item in obj track by $index">

下面是工作代码sn-p。希望对你有帮助！

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

app.controller('Ctrl', ['$scope',
  function($scope) {
    $scope.obj = [{
      intro: "intromessage",
      desc: "desc1"
    }, {
      intro: "intromessage2",
      desc: "desc2"
    }];
  }
]);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<body data-ng-app="App">

  <div ng-controller="Ctrl">
    <!-- If you just want to access first object -->
    <p>{{obj[0].desc}}</p>
        <!-- If you just want to access all objects -->
    <p ng-repeat="item in obj track by $index"> 
    {{item.intro}}  ---- {{item.desc}}
    
    </p>
  </div>

</body>

【讨论】：

谢谢，您为此付出了很多努力。 :)

【解决方案2】：

修复错误：

   <!-- REPLACE this 
   <body data-ng-controller="App">
   -->

   <!-- WITH this -->
   <body ng-app="App">

要显示数据，请使用ng-repeat 指令

<div ng-controller="Ctrl">
  <div ng-repeat="item in obj">
     <p>{{item.intro}}</p>
     <p>{{item.desc}}</p>
  </div>
</div>

【讨论】：

【解决方案3】：

您正在处理一个对象数组，因此您必须对其进行迭代。所以你需要做一个 Angular forEach 循环。

<div ng-controller="Ctrl" ng-repeat="desc in obj">
     <p>{{desc}}</p>
</div>

ng-repeat

也看到了这个

应用程序的大小写应与您在初始化应用程序时声明的 var 相同。此外，您不会以您拥有的方式在方括号中声明范围。我想我在下面修复了它。

app.controller('Ctrl', function($scope) {
    $scope.obj = [
          {
                intro: "intromessage",
                desc: "desc"
          },
          {
                intro: "intromessage2",
                desc: "desc"
          }
       ];
   });

【讨论】：

是的。但这只是因为它是在 angular.module('App', []); 中声明的方式；
我收到了同样的错误信息。请检查我编辑的问题。
我对应用程序的大小写进行了更改。检查出。您是否更改了在范围上定义 obj 的方式？

【解决方案4】：

这里的问题是您试图获取 obj.desc 但 obj 是一个对象数组。所以，要么你需要使用ng-repeat 要么提供一个索引。另外，你缺少ng-app="appName"（通常写成body）

这是工作的example

【讨论】：

@tholo 阅读了您的最后一次编辑。您的 HTML 中的 <script> 中的链接正确吗？

【解决方案5】：

似乎您还没有实例化角度应用程序。因此，您遇到了模块错误。请使用 ng-app 引导应用程序，然后提供 ng-repeat 的控制器和指令。如果您使用的是 ng-route，那么您必须在 angularjs.min.js 文件之外添加一个 ngRoute 文件。

<html ng-app="angularjs-injection">
<head>
......
</head>
<body ng-controller="MainCtrl">
    <h1 ng-repeat="text in name">Hey! {{text.intro}} - {{text.desc}}</h1>
    <div class="changeIt"></div>
</body>

请以此处的代码为例-http://plnkr.co/edit/5RVhNcO9F81Q3WeesySu

如果您仍然遇到问题，请添加一个简单的 plunker，它将有助于识别实际问题。

【讨论】：

I have resolved this by placing controller in the same file where app is defined - app.js. When placed in separate folder it is not working. I do not know why at this point. 啊模块化代码或隔离代码并不意味着破坏框架规则。 AngularJS 是一个单页应用程序，定义必须在一个 html 页面中。否则，除非您仅使用带有路由的标记模板，否则它将不起作用。以我的 plunkr 为例。
您需要逐步学习AngularJS并正确理解文档或提出具体问题。我不明白你的意思/