AngularJS不解析对象数组 [英] AngularJS Doesn't Resolve An Array of Objects

查看：106
本文介绍了AngularJS不解析对象数组的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

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



这是我的HTML： 

 < body data-ng -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
}，
 {
介绍：intromessage2，
 desc：desc
} 
]; 
}]）;

我没有得到值 from 键。在这种情况下，我没有收到任何来自 desc 的任何内容，只是一个控制台错误。 编辑：建议如下。我确实在正文中放入了 data-ng-app ，这是我收到的完整错误：


错误：[$ injector：modulerr]
http：// errors。 angularjs.org/1.5.7/ $注射器/ 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％2FA JAX％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％3A246％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
a

它可能很小，但我花了整整一个早上试图弄清楚它。



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

解决方案

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

1。错误



您在控制台中看到的大堆栈错误是因为下面这行代码以错误的方式将数组作为范围注入。 b
$ b 

  app.controller（'Ctrl'，[$ scope，function（$ scope）{
  pre> 
 
 
只要将它改为这样 app.controller（'Ctrl'，['$ scope'，function（$ scope）{通过简单地将它添加到单引号中。
 
 
 
在编写更好的控制器时遵循这种依赖注入，这是一个很好的练习，当你想要缩小你的JS。
 
 
 
  2.错误 
 $ scope.obj 是一个数组，因此只需执行 {{obj.desc}} 就可以访问其中的项目。 c $ c> {{obj [0] .desc}} 但是如果你想访问数据中的所有对象，你可以使用 ng-repeat 像下面那样
 < p ng-repeat =obj track by item item> 
  
贝尔ow是工作代码片段。希望这可以帮助你！
 
 
 
 
 
  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> <！ - 如果您只想访问第一个对象 - > < p为H. {{OBJ [0] .desc}}< / p为H. <！ - 如果您只想访问所有对象 - > < p ng-repeat =obj track by $ index中的项目> {{item.intro}} ---- {{item.desc}}< / p> < / body>


I am new to Angular so please forgive me if the question is stupid.

This is my 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"
          }
       ];
   }]);

I am not getting the value from key. In this case I am not receiving anything from desc, just a console error.

EDIT: I have tried everything proposed below. I did put data-ng-app in body, this is the full error I am receiving:

Error: [$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%3A246%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 a

It's probably something small, but I've spend entire morning trying to figure it out..

EDIT 2: 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.

解决方案

You just made a boo boo here, a beginner mistake but not a big one.

1. Mistake

The big stack error you see in console is because of this below line where you injected scope in array in a wrong way.

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

just change it to like this app.controller('Ctrl', ['$scope', function($scope) { by simply adding it in single quotes.

This kind of dependency injection is followed while writing a better controller and this is a good practice when you want to minify your JS.

2. Mistake

$scope.obj is an array so you cant access items in it by simply doing {{obj.desc}} what you need is {{obj[0].desc}} but if you want to access all objects in the data you can use ng-repeat like below

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

Below is the working code snippet.Hope this helps you !

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>

这篇关于AngularJS不解析对象数组的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆