我想在 angularjs 方面提高自己，通过以下脚本，我只收到类别，但不显示产品。 我没有收到任何类型的错误，因此我无法按照脚本找出错误。
HTML:
<html ng-app="orderSystem">
<head>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
<link rel="stylesheet" href="css/app.css">
</head>
<body>
<form id="search">
<fieldset>
<input type="text" placeholder="Suche" ng-model="search">
</fieldset>
</form>
<div id="orderlist" ng-controller="CategoriesCtrl">
<div class="container-fluid" ng-repeat="cat in categories track by $index">
<ul class="list-unstyled row" style="background: #000; color: #FFF" ng-switch="cat.category">
<li ng-switch-when="1 || 2 || 3 || 4 || 5 || 6 || 7 || 8">
<ul class="row list-inline">
<li>{{cat.cateName}}</li>
<li>Name</li>
<li>Beschreibung</li>
<li>Preis</li>
</ul>
</li>
<li ng-switch-when="9">
<ul class="row list-inline">
<li>{{cat.cateName}}</li>
<li>Name</li>
<li>Preis</li>
</ul>
</li>
<li ng-switch-default>
<ul class="row list-inline">
<li>{{cat.cateName}}</li>
<li>Name</li>
<li>Beschreibung</li>
<li>Preis</li>
</ul>
</li>
</ul>
<ul class="list-unstyled row" ng-controller="ProductsCtrl">
<li ng-repeat="product in products | filter:search" ng-if="product.category == cat.category" >
<ul class="row list-inline" >
<li>{{product.nr}}</li>
<li>{{product.name}}</li>
<li>{{product.description}}</li>
<li>{{product.price}}</li>
<li ng-if="product.price1">{{product.price1}}</li>
<li class="btn"><span class="glyphicon glyphicon-plus"> </span></li>
<li class="btn"><span class="glyphicon glyphicon-minus"> </span></li>
</ul>
</li>
</ul>
</div>
</div>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.12/angular.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.14/angular-animate.js"></script>
<script src="//code.jquery.com/jquery-2.1.3.min.js"></script>
<script src="js/app.js"></script>
</body>
</html>
Json (data/products.json):
[
{ "nr": "75", "name": "Hollandaisesauce", "description": "", "price": 0.60, "category": 10 }
{ "nr": "76", "name": "Pizza Magherita", "description": "Tomatensauce und Goudakaese", "price": 3.00, "price1": 4.00, "category": 11 }
]
Json(数据/类别):
[
{ "category": "11", "cateName": "Pizza" },
{ "category": "12", "cateName": "Pizzabrötchen" }
]
JavaScript (js/app.js):
angular.module("orderSystem",[])
.controller('ProductsCtrl', function($scope, $http){
$http.get('data/products.json').then(function(productsResponse) {
$scope.products = productsResponse.data;
});
})
.controller('CategoriesCtrl', function($scope, $http){
$http.get('data/categories.json').then(function(categoriesResponse) {
$scope.categories = categoriesResponse.data;
});
});
几个小时后，我没有意识到我的文件中存在错误。 我很感谢每个答案:)
最佳答案
http://plnkr.co/edit/gJAE1IJ388Iyl5K0Kxou?p=preview
angular.module('app',[])
.controller('ProductsCtrl', function($scope, $http){
$scope.products = [
{ "nr": "75", "name": "Hollandaisesauce", "description": "", "price": 0.60, "category": 10 },
{ "nr": "76", "name": "Pizza Magherita", "description": "Tomatensauce und Goudakaese", "price": 3.00, "price1": 4.00, "category": 11 }
];
})
.controller('CategoriesCtrl', function($scope, $http){
$scope.categories = [
{ "category": "11", "cateName": "Pizza" },
{ "category": "10", "cateName": "Pizzabrötchen" }
];
});
<html >
<head>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
<link rel="stylesheet" href="css/app.css">
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.12/angular.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.14/angular-animate.js"></script>
<script src="//code.jquery.com/jquery-2.1.3.min.js"></script>
<script src="app.js"></script>
</head>
<body ng-app="app">
<form id="search">
<fieldset>
<input type="text" placeholder="Suche" ng-model="search">
</fieldset>
</form>
<div id="orderlist" ng-controller="CategoriesCtrl">
<div class="container-fluid" ng-repeat="cat in categories track by $index">
<ul class="list-unstyled row" style="background: #000; color: #FFF" ng-switch="cat.category">
<li ng-switch-when="1 || 2 || 3 || 4 || 5 || 6 || 7 || 8">
<ul class="row list-inline">
<li>{{cat.cateName}}</li>
<li>Name</li>
<li>Beschreibung</li>
<li>Preis</li>
</ul>
</li>
<li ng-switch-when="9">
<ul class="row list-inline">
<li>{{cat.cateName}}</li>
<li>Name</li>
<li>Preis</li>
</ul>
</li>
<li ng-switch-default>
<ul class="row list-inline">
<li>{{cat.cateName}}</li>
<li>Name</li>
<li>Beschreibung</li>
<li>Preis</li>
</ul>
</li>
</ul>
<ul class="list-unstyled row" ng-controller="ProductsCtrl">
<li ng-repeat="product in products | filter:search" ng-show='product.category==cat.category'><!-- product.category-->
<ul class="row list-inline" >
<li>{{product.nr}}</li>
<li>{{product.name}}</li>
<li>{{product.description}}</li>
<li>{{product.price}}</li>
<li ng-if="product.price1">{{product.price1}}</li>
<li class="btn"><span class="glyphicon glyphicon-plus"> </span></li>
<li class="btn"><span class="glyphicon glyphicon-minus"> </span></li>
</ul>
</li>
</ul>
</div>
</div>
</body>
</html>
关于javascript - angularjs-脚本没有输出，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/29126856/