1
私は製品ページの{{jeans.title}}を呼び出していますが、動作しません。ng-repeatは別のページにリダイレクトされている間に動作しません
私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}}呼び出していながら。
ありがとう：
また、あなたがここにあなたのJSONオブジェクト内のサブオブジェクト
mens[0].jeansにアクセスしたいようです。はい、JSON内のサブオブジェクトmens.jeansにアクセスしようとしています。しかし、私は同じ問題に直面しています。 私はすべてのコードを与えました。可能であれば、Jsfiddleやその他のオンラインエディタを使って修正されたバージョンのコードを私に教えてください。それは私のためにもっと役立つように。 –@karthickravindranath JSFiddleを介してあなたの非作業コードを共有している場合、私は他の問題を見つけようとします。 – leemes
私は自分のコードのすべてのビットを置くことができなかったので。私はGoogleドライブにアップロードしました。 @leemes私のクエリのPFA [製品クエリ]（https://drive.google.com/file/d/0B8yTbYRxA0PRZW1pZFBydlBYamM/view?usp=sharing） –