Здравствуйте!
Я прохожу курс на coursera по angularJS, где изучение возможностей и функционала Angular происходит во время разработки сайта ресторана, и у меня возникла проблема с отображением контента.
Например:
Вместо отображения описания блюда, у меня появляется лишь {{dish.description}}.
Я перепроверила код и указания в лекциях, но, к сожалению, так и не нашла причину. Буду признательна, если вы сможете мне помочь.
Код страницы menu.html ->
<!DOCTYPE html>
<html lang="en" ng-app="confusionApp">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Ristorante Con Fusion: Menu</title>
</head>
<body>
<div class="container">
<div class="row row-content" ng-controller="MenuController">
<div class="col-xs-12">
<button ng-click="toggleDetails()" class="btn btn-xs btn-primary pull-right" type="button">
{{showDetails ? 'Hide Details':'Show Details'}}
</button>
<ul class="nav nav-tabs" role="tablist">
<li role="presentation"
ng-class="{active:isSelected(1)}">
<a ng-click="select(1)"
aria-controls="all menu"
role="tab">The Menu</a></li>
<li role="presentation"
ng-class="{active:isSelected(2)}">
<a ng-click="select(2)"
aria-controls="appetizers"
role="tab">Appetizers</a></li>
<li role="presentation"
ng-class="{active:isSelected(3)}">
<a ng-click="select(3)"
aria-controls="mains"
role="tab">Mains</a></li>
<li role="presentation"
ng-class="{active:isSelected(4)}">
<a ng-click="select(4)"
aria-controls="desserts"
role="tab">Desserts</a></li>
</ul>
<div class="tab-content">
<ul class="media-list tab-pane fade in active">
<li class="media" ng-repeat="dish in dishes | filter:filtText">
<div class="media-left media-middle">
<a href="#">
<img class="media-object img-thumbnail"
ng-src={{dish.image}} alt="Uthappizza">
</a>
</div>
<div class="media-body">
<h2 class="media-heading">{{dish.name}}
<span class="label label-danger">{{dish.label}}</span>
<span class="badge">{{dish.price | currency}}</span></h2>
<p ng-show="showDetails">{{dish.description}}</p>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
<!-- build:js scripts/main.js -->
<script src="http://code.angularjs.org/1.0.7/angular.min.js" ></script>
<script src="scripts/app.js"></script>
<script src="scripts/controllers.js"></script>
<script src="scripts/services.js"></script>
<!-- endbuild -->
</body>
</html>
Код controllers.js:
'use strict';
angular.module('confusionApp')
.controller('MenuController', ['$scope', 'menuFactory', function($scope, menuFactory) {
$scope.tab = 1;
$scope.filtText = '';
$scope.showDetails=false;
$scope.dishes= menuFactory.getDishes();
$scope.select = function(setTab) {
$scope.tab = setTab;
if (setTab === 2) {$scope.filtText = "appetizer";}
else if (setTab === 3) {$scope.filtText = "mains";}
else if (setTab === 4) {$scope.filtText = "dessert";}
else {$scope.filtText = "";}
};
$scope.isSelected = function (checkTab) {
return ($scope.tab === checkTab);
};
$scope.toggleDetails = function() {
$scope.showDetails = !$scope.showDetails;
};
}])
.controller('ContactController', ['$scope', function($scope) {
$scope.feedback = {mychannel:"", firstName:"", lastName:"",
agree:false, email:"" };
var channels = [{value:"tel", label:"Tel."}, {value:"Email",label:"Email"}];
$scope.channels = channels;
$scope.invalidChannelSelection = false;
}])
.controller('FeedbackController', ['$scope', function($scope) {
$scope.sendFeedback=function(){
console.log($scope.feedback);
if ($scope.feedback.agree && ($scope.feedback.mychannel == "")&& !$scope.feedback.mychannel) {
$scope.invalidChannelSelection = true;
console.log('incorrect');
}
else {
$scope.invalidChannelSelection = false;
$scope.feedback = {mychannel:"", firstName:"", lastName:"",
agree:false, email:"" };
$scope.feedback.mychannel="";
$scope.feedbackForm.$setPristine();
console.log($scope.feedback);
}
};
}])
.controller('DishDetailController', ['$scope', 'menuFactory', function($scope, menuFactory) {
$scope.dish = menuFactory.getDish(3);
$scope.dish = dish;
}])
.controller('DishCommentController', ['$scope', function($scope) {
$scope.comment = {rating: 5,comment: "",author: "",date: ""};
$scope.submitComment = function() {
$scope.comment.date = new Date().toISOString();
$scope.dish.comments.push($scope.comment);
$scope.commentForm.$setPristine();
$scope.comment = {
rating: 5,
comment: "",
author: "",
date: ""
};
};
}]);
Код services.js:
'use strict';
angular.module('confusionApp')
.service('menuFactory', function(){
var dishes=[
{ name:'Uthapizza',
image: 'images/uthapizza.png',
category: 'mains',
label:'Hot',
price:'4.99',
description:'A unique combination of Indian Uthappam (pancake) and Italian pizza, topped with Cerignola olives, ripe vine cherry tomatoes, Vidalia onion, Guntur chillies and Buffalo Paneer.',
comments: [
{
rating:5,
comment:"Imagine all the eatables, living in conFusion!",
author:"John Lemon",
date:"2012-10-16T17:57:28.556094Z"
},
{
rating:4,
comment:"Sends anyone to heaven, I wish I could get my mother-in-law to eat it!",
author:"Paul McVites",
date:"2014-09-05T17:57:28.556094Z"
},
{
rating:3,
comment:"Eat it, just eat it!",
author:"Michael Jaikishan",
date:"2015-02-13T17:57:28.556094Z"
},
{
rating:4,
comment:"Ultimate, Reaching for the stars!",
author:"Ringo Starry",
date:"2013-12-02T17:57:28.556094Z"
},
{
rating:2,
comment:"It's your birthday, we're gonna party!",
author:"25 Cent",
date:"2011-12-02T17:57:28.556094Z"
} ]
} ];
this.getDishes = function(){
return dishes;
};
this.getDish = function (index) {
return dishes[index];
};
});
