CODEWITHSUNDEEP
angularjs
karthick ravindranath
karthick ravindranath

Reputation: 97

ng-repeat not working while ng-view redirect to another page

while i am calling {{jeans.title}} in product page its not working.

my app.js code:-

<!-- Modules -->

var app = angular.module('GalleryApp', ['ngRoute']);


<!-- routeProvider -->

app.config(function ($routeProvider) { 
  $routeProvider
    .when('/', { 
        controller: 'HomeController',
        templateUrl: 'views/home.html'
    })
    .when('/products/:id', {
        controller: 'ProductsController',
        templateUrl:'views/product.html'
    })
    .otherwise({ redirectTo: '/' }); 
});



<!-- Controllers -->

app.controller('HomeController', ['$scope', 'products', function($scope, products) {
    products.success(function(data1) {
        $scope.products = data1;

    });
}]);

app.controller('ProductsController', ['$scope', 'products', '$routeParams', function($scope, products, $routeParams) {
    products.success(function(data2) {
        jeans = data2[$routeParams.id];
    });

}]);


<!-- services -->

app.factory('products', ['$http', function($http) {
  return $http.get('products.json')
         .success(function(data) {
           return data;
         });
}]);

index.html:-

<!doctype html>
<html>
  <head>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <link href="https://fonts.googleapis.com/css?family=Roboto:400,500,300" rel="stylesheet" type="text/css">
    <link href="css/main.css" rel="stylesheet" />

    <!-- Include the core AngularJS library -->
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.5/angular.min.js"></script>

    <!-- Include the AngularJS routing library -->
    <script src="https://code.angularjs.org/1.2.28/angular-route.min.js"></script>
  </head>
  <body ng-app="GalleryApp">

    <div ng-view></div>
    <script src="js/app.js"></script>

  </body>
</html>

home.html:-

<div class="container">
    <div class="row" ng-repeat="men in products.mens">
      <div class="col-sm-4" ng-repeat="jean in men.jeans">
        <p>{{ jean.title }}</p>
        <img ng-src="{{ jean.img }}" alt="{{ jean.brand }}" title="{{ jean.brand }}"/>
        <h3>{{ jean.brand }}</h3>
        <h4>{{ jean.model }}</h4>
      </div>
    </div>
  </div>

product.html:-

<div class="container">
    <div class="row">
        <div class="col-sm-6">
            <p>{{ jeans.title }}</p>
        </div>
    </div>
</div>

Product.json:-

{
  "mens": [
    {
      "name": "mens fasion",
      "jeans": [
        {
          "title": "Slim fit",
          "model": "slim 2527",
          "brand": "Tommy Hilfiger",
          "img": "images/mens/jeans/product_1.jpg",
          "price": "2000",
          "offer": "10"
        },
        {
          "title": "Parallel",
          "model": "Parallel-1575",
          "brand": "Denim",
          "img": "images/mens/jeans/product_2.jpg",
          "price": "2500",
          "offer": "15"
        },
        {
          "title": "cargos",
          "model": "cargos 2876",
          "brand": "Lee Cooper",
          "img": "images/mens/jeans/product_3.jpg",
          "price": "3000",
          "offer": "20"
        }
      ]
    }
  ]
}

while i am calling {{jeans.title}} in product page its not working.

Upvotes: 1

Views: 153

Answers (1)

leemes
leemes

Reputation: 45705

In ProductsController

    jeans = data2[$routeParams.id];

you are missing $scope.. It should be:

    $scope.jeans = data2[$routeParams.id];

Also, it seems that you want to access the sub-object mens[0].jeans within your JSON object here:

    $scope.jeans = data2.mens[0].jeans[$routeParams.id];

Upvotes: 1

Related Questions