Question

我想在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;
        });
    });

几个小时后，我没有认出我档案中的错误。我很感谢每个答案：）

Answer 1

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>

没有angularjs脚本的输出

1 个答案: