Мои угловые выражения не берут данные из массива

Я только начинаю с Angular через курс кодовой школы. Это моя первая структура. Я пытаюсь создать очень, очень простое меню, используя ng-repeat. Это очень близко соответствует первому проекту в курсе кодов, но кажется, что я, возможно, что-то неправильно понял или, возможно, была концепция, которая была недостаточно охвачена на этом этапе курса. Я вернулся и заново просмотрел видео, которые покрывают то, что мне нужно знать, чтобы построить это, и я не вижу, что бы это заставило это работать. Мне нужно, чтобы мяч катился сюда. Это ошибка в моих директивах?Мои угловые выражения не берут данные из массива

<html ng-app = 'menu'> 
    <body ng-controller = 'MenuController as menu'> 
    <section ng-repeat="menuItem in menu.menuItem"> 
     <h1> {{menuItem.name}} </h1> 
     <p> {{menuItem.description}} </p> 
     <h3> {{menuItem.price}} </h3> 
    </section> 
    </body> 
</html>

Херес JS:

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

app.controller("MenuController", function(){ 
    this.menuItem = appetizers; 
}); 

var appetizers = [{ 
    name : "Seared Ahi Tuna", 
    decription : "Cooked rare, thinly sliced and served over seaweed salad with a teriyaki glaze", 
    price : "12" 
}, 
{ 
    name : "Artisan Cheese Board", 
    decription : "Five chef-selected cheeses from WI farms (Sorry, no happy hour)", 
    price : "12" 
}...

codepen

источник

2015-02-11 Marcus

К сожалению, отправил его перед соединением. Мозг скремблирован. – Marcus

угловой не загружен. –

Не было бы объявление переменной 'appetizers' до того, как оно будет использоваться в' app.controller ... '? –

Ваш codepen имеет свой файл сценария как IIFE, но отсутствует вызов () в конце, так что он никогда не работает. Код будет работать отлично, если вы удалите определение IIFE (function(){ ... }); или добавите вызов в конец })();.

Обратите внимание, что это не имеет прямого отношения к Angular, это скорее проблема JavaScript Semantics ... Не позволяйте этому отключать использование Angular!

источник

2015-02-11 20:31:16 Claies

Ваша ошибка Failed to instantiate module menu Есть несколько вариантов того, почему вы получите эту ошибку, но в данном случае это происходит потому, что не может найти модуль меню. Если вы посмотрите на свой код

(function(){ 

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

Уведомление о том, что вы на самом деле не вызываете анонимную функцию, поэтому код никогда не запускается. Все, что вам нужно сделать, это вызвать функцию &.

(function(){ 

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

источник

2015-02-11 20:30:40

Вы должны выполнить анонимную функцию, как сказал Остин, но код также был неправильным. Как правило, лучше вводить область видимости в контроллер, чтобы сделать элемент доступным из команды ng-repeat.

(function() { 
 

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

 
    app.controller("MenuController", function($scope) { 
 
    $scope.menuItem = appetizers; 
 
    }); 
 

 
    var appetizers = [{ 
 
    name: "Seared Ahi Tuna", 
 
    decription: "Cooked rare, thinly sliced and served over seaweed salad with a teriyaki glaze", 
 
    price: "12" 
 
    }, { 
 
    name: "Artisan Cheese Board", 
 
    decription: "Five chef-selected cheeses from WI farms (Sorry, no happy hour)", 
 
    price: "12" 
 
    }, { 
 
    name: "Oysters on the Half Shell*", 
 
    decription: "Fresh Blue Points from the Delaware Bay", 
 
    price: "1/2 Order 10, Full Dozen 16" 
 
    }, { 
 
    name: "Chorizo Sliders", 
 
    decription: "Three sliders on pretzel buns with sauteed onion, fried pickle chip and grained mustard", 
 
    price: "9" 
 
    }, { 
 
    name: "Tenderloin Lollipops*", 
 
    decription: "Served over a bed of red wine garlic mushrooms", 
 
    price: "10" 
 
    }] 
 
})();

section { 
 
    border: 1px solid grey; 
 
    width: 50%; 
 
    margin: 0 auto; 
 
}

<html ng-app='menu'> 
 

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

 
<body ng-controller='MenuController'> 
 
    <section ng-repeat="item in menuItem"> 
 
    <h1> {{item.name}} </h1> 
 
    <p>{{item.description}}</p> 
 
    <h3> {{item.price}} </h3> 
 
    </section> 
 
</body> 
 

 
</html>

источник

2015-02-11 20:38:06 ntrp

ничего плохого в коде, он использует синтаксис Controller As, который является альтернативным способом обработки переменных без необходимости «$ scope». https://docs.angularjs.org/api/ng/directive/ngController – Claies

Да, это тоже должно работать, но я думаю, что подход $ scope намного чище. Вот почему я тоже изменил эту часть. – ntrp

Вам необходимо включить AngularJS Framework, прежде чем использовать его, и вы не инъекционный объем. Первоначальный вызов имел анонимную функцию, но не выполнял ее.

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

 

 

 

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

 
    $scope.appetizers = [{ 
 
     name: "Seared Ahi Tuna", 
 
     decription: "Cooked rare, thinly sliced and served over seaweed salad with a teriyaki glaze", 
 
     price: "12" 
 
    }, { 
 
     name: "Artisan Cheese Board", 
 
     decription: "Five chef-selected cheeses from WI farms (Sorry, no happy hour)", 
 
     price: "12" 
 
    }, { 
 
     name: "Oysters on the Half Shell*", 
 
     decription: "Fresh Blue Points from the Delaware Bay", 
 
     price: "1/2 Order 10, Full Dozen 16" 
 
    }, { 
 
     name: "Chorizo Sliders", 
 
     decription: "Three sliders on pretzel buns with sauteed onion, fried pickle chip and grained mustard", 
 
     price: "9" 
 
    }, { 
 
     name: "Tenderloin Lollipops*", 
 
     decription: "Served over a bed of red wine garlic mushrooms", 
 
     price: "10" 
 
    }]; 
 

 

 

 
    $scope.menu = $scope.appetizers; 
 
    } 
 
]);

section { 
 
    border: 1px solid grey; 
 
    width: 50%; 
 
    margin: 0 auto; 
 
}

<html ng-app='menuApp'> 
 

 
<head> 
 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.12/angular.min.js"></script> 
 
</head> 
 

 
<body ng-controller='MenuController'> 
 
    <section ng-repeat="menuItem in menu"> 
 
    <h1> {{menuItem.name}} </h1> 
 
    <p>{{menuItem.description}}</p> 
 
    <h3> {{menuItem.price}} </h3> 
 
    </section> 
 
</body> 
 

 
</html>

источник

2015-02-11 20:42:44 Dayan

Мои угловые выражения не берут данные из массива

ответ

Смежные вопросы