No output for angularjs- script

Question

I wanna improve myself in angularjs and with following scripts I only receive the categories, but the products aren't displayed. I didn't receive any kind of error, so I'm not able to follow the script to its mistake.

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 (data/categories):

[
{ "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;
        });
    });

After hours I didn't recognize my mistake(s) in my files. I'm thankful for each answer :)

Please re-edit your post and state your PURPOSE and your PROBLEM clearly — Piotr Dajlido
– Piotr Dajlido, Commented Mar 18, 2015 at 16:01
I think the problem is that ng-if completely removes the element from the DOM, and this directive fires before the $http request completes, so your product elements are never populated. Try ng-show instead. — Austin Mullins
– Austin Mullins, Commented Mar 18, 2015 at 16:25

Norbor Illig · Accepted Answer · 2015-03-18 17:23:46Z

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>

Collectives™ on Stack Overflow

No output for angularjs- script

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related