Question

我拥有的内容：以下代码是使用ng-repeat指令显示项目列表的一个非常简单的示例。但是，打开网站时出现的唯一问题是{{product}}。

<!DOCTYPE html>
<html lang="en" data-ng-app="myApp">
<head>
    <meta charset="UTF-8">
    <title>Some Title</title>

    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" media="screen">
</head>
<body>

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

<div class="container">
    <div 
        data-ng-repeat="product in products" 
        data-ng-if="$index % 3 == 0" 
        data-ng-init="products=['soda','beer','water','milk','wine']" class="row">
        <div class="col-xs-4"
             data-ng-repeat="product in products.slice($index, ($index+3 > products.length ? products.length : $index+3))"> {{product}}</div>
    </div>
</div>

</body>
</html>

控制台出错：这是控制台中显示的内容。不确定为什么应用程序配置不正确，因为它在html标签中设置。

Error: [$injector:modulerr] Failed to instantiate module myApp due to:
[$injector:nomod] Module 'myApp' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.

实际问题：为什么变量product不包含列表中的项目？

到目前为止我尝试了什么：很多，但我对JavaScript完全不熟悉所以我不能说如何从这里继续前进。

Answer 1

看起来你没有连接角应用程序。我假设你没有任何控制器甚至是javascript文件中的应用程序。至少您需要执行以下代码行

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

Answer 2

除了设置角度应用程序本身，另一个问题是ng-repeat在ng-init之前进行评估。

ng-repeat指定应创建的元素（div）的实例。创建后，对每个人评估ng-init。最初没有产品，因此根本没有创建元素，因此根本不会调用ng-init。

一个解决方案是将ng-init放入像您的容器div这样的父元素中。但通常你会想把这些代码放在你的控制器中，避免使用ng-init。

Answer 3

如果您没有声明角度模块，那么您就不需要编写应用程序名称，即myApp

见工作DEMO

我没有得到你在产品中尝试实现的目标。您可能需要使用角度过滤器来实现这一目标。详细解释您希望从人们那里获得帮助的目的。

data-ng-init中的变量未初始化

3 个答案: