Переменная в data-ng-init не инициализируется

0

Что мне нужно: следующий код - очень простой пример, показывающий список элементов с помощью директивы 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, поэтому не могу сказать, как дальше двигаться дальше.

  • 1
    Что за ошибка в вашей консоли. Нажмите F12 и увидите вкладку консоли.
  • 0
    Вставьте свой контроллер или код Javascript.
Показать ещё 2 комментария
Теги:

3 ответа

0
Лучший ответ

Похоже, вы не подключили угловое приложение. Я предполагаю, что у вас нет никаких контроллеров или даже приложений в файле javascript. Как минимум вам нужно будет сделать следующую строку кода

var myApp = angular.module('myApp', []);
Поделиться
  • 0
    Просто попытался добавить это в HTML-файл в тег скрипта, но это не работает. Требуется ли отделять часть JS от файла HTML? <script>var myApp = angular.module('myApp', []);</script>
  • 0
    это не обязательно должно быть в отдельном файле.
0

Если у вас нет объявления углового модуля, вам не нужно писать имя приложения, т.е. myApp

См. Работу DEMO

Я не получаю то, чего вы пытаетесь достичь, нарезанный предметами. Возможно, для этого вам понадобится использовать угловой фильтр. Объясните подробно, что именно вы хотите достичь, чтобы получить помощь от людей.

Поделиться
  • 0
    Извините за это нарезка. Я на самом деле хочу показать список элементов по горизонтали (3 элемента), а затем развернуть по вертикали (таким образом, 3 элемента в строке). Думаю, для этого примера было бы проще сказать, что я хочу напечатать продукты. Итак, вместо этого <div ... скажем так, код говорит: <div data-ng-repeat="product in products">{{product}}</div>
0

Помимо настройки самого углового приложения, еще одна проблема заключается в том, что ng-repeat оценивается до ng-init.

ng-repeat указывает экземпляры элемента (div), который должен быть создан. После создания для каждого из них оценивается ng-init. Первоначально нет продуктов, поэтому вообще не создается элемент, поэтому ng-init вообще не будет вызываться.

Одним из решений для этого было бы поместить ng-init в родительский элемент, такой как ваш контейнер div. Но обычно вы хотели бы поставить такой код в свой контроллер и не использовать ng-init.

Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню