Question

当我在产品页面中调用{{jeans.title}}时，它无效。

我的app.js代码： -

<!-- 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"
        }
      ]
    }
  ]
}

当我在产品页面中调用{{jeans.title}}时，它无效。

Answer 1

在ProductsController

    jeans = data2[$routeParams.id];

你遗失了$scope.。它应该是：

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

此外，您似乎想在此处访问JSON对象中的子对象mens[0].jeans：

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

当ng-view重定向到另一个页面时，ng-repeat不起作用

1 个答案: