3
Der Code funktioniert gut, wenn ich die "this" -Methode verwenden, um Variablen offen zu legen. Allerdings nach der Aufnahme von Scope in den Code. Die Seite zeigt nur die Elemente an, die sich außerhalb des Bereichs der Steuerung befinden.
<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head
content must come *after* these tags -->
<title>Ristorante Con Fusion: Menu</title>
<!-- Bootstrap -->
<link href="bower_components/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="bower_components/bootstrap/dist/css/bootstrap-theme.min.css" rel="stylesheet">
<link href="bower_components/font-awesome/css/font-awesome.min.css" rel="stylesheet">
<link href="styles/bootstrap-social.css" rel="stylesheet">
<link href="styles/mystyles.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="container">
<div class="row row-content" ng-controller="myctrl">
<div class="col-xs-12">
<div class="tab-content">
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" ng-class="{active: isSelected(1)}">
<a href="" ng-click="select(1)"
aria-controls="all menu"
role="tab">The Menu</a></li>
<li role="presentation" ng-class="{active: isSelected(2)}">
<a href="" ng-click="select(2)"
aria-controls="appetizers"
role="tab">Appetizers</a></li>
<li role="presentation" ng-class="{active: isSelected(3)}">
<a href="" ng-click=" select(3)"
aria-controls="mains"
role="tab">Mains</a></li>
<li role="presentation" ng-class="{active: isSelected(4)}">
<a href="" ng-click=" select(4)"
aria-controls="desserts"
role="tab">Desserts</a></li>
</ul>
</div>
<ul>
<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>{{dish.description}}</p>
<p>Comment: {{dish.comment}}</p>
</div>
</li>
</ul>
</div>
</div>
</div>
<script src="bower_components/angular/angular.min.js"></script>
<script src="scripts/app.js"></script>
<script src="scripts/controller.js"></script>
</body>
</html>
App.js:
var app=angular.module("myApp",[]);
Controller.js:
app.controller("myctrl",['$scope',function($scope)
{ $scope.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.',
comment: ''
},
{
name:'Zucchipakoda',
image: 'images/zucchipakoda.png',
category: 'appetizer',
label:'',
price:'1.99',
description:'Deep fried Zucchini coated with mildly spiced Chickpea flour batter accompanied with a sweet-tangy tamarind sauce',
comment: ''
},
{
name:'Vadonut',
image: 'images/vadonut.png',
category: 'appetizer',
label:'New',
price:'1.99',
description:'A quintessential ConFusion experience, is it a vada or is it a donut?',
comment: ''
},
{
name:'ElaiCheese Cake',
image: 'images/elaicheesecake.png',
category: 'dessert',
label:'',
price:'2.99',
description:'A delectable, semi-sweet New York Style Cheese Cake, with Graham cracker crust and spiced with Indian cardamoms',
comment: ''
}
];
$scope.filtText = '';
$scope.tab = 1;
$scope.dishes = dishes;
$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);
}
}])
Sie überschreiben '$ scope.dishes = Geschirr;' –
Eigentlich habe ich gerade herausgefunden, dass ich die Geschirrvariable in controller.js neu definierte. $ scope.dises = Geschirr; Entfernt es und es funktioniert jetzt gut. Danke trotzdem :) – Zain