gpt4 book ai didi

javascript - AngularJS 不解析对象数组

转载 作者:可可西里 更新时间:2023-11-01 13:24:53 24 4
gpt4 key购买 nike

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

这是我的 HTML:

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

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

*
*
*
</body>

应用程序.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 放入正文中,这是我收到的完整错误:

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

这可能是一件小事,但我花了整个上午试图弄明白..

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

最佳答案

你刚刚在这里犯了一个错误,一个新手错误,但不是一个大错误。

<强>1。错误

您在控制台中看到的大堆栈错误是因为您以错误的方式在数组中注入(inject)范围的下面这一行。

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

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

在编写更好的 Controller 时遵循这种依赖注入(inject),当您想缩小 JS 时,这是一个很好的做法。

<强>2。错误

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

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

下面是工作代码片段。希望这对你有帮助!

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>

关于javascript - AngularJS 不解析对象数组,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40413038/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com