本文介绍了如何获取其他页面的数组详细信息的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我有类别数组。有更多的产品。
我需要在类别页面中显示类别。
点击某个类别后,我必须重定向产品页面并显示必要的产品。
点击产品时,我必须重定向product_details页面并显示必要的产品详细信息。
I have category array. there are more products.I need show categories in category page.when click on a category, I have to redirect the product page and show the necessary products.When click on a product, I have to redirect the product_details page and show the necessary product details.
类别加载到类别页面,点击它会重定向产品页面。但是,我看不到产品。
以及如何创建product_details.html页面。
我必须这样显示:
- 类别页面:term_id,名称
- 产品页面:post_title,ID
- 产品详情页面: post_title,post_date,post_author,ID
categorylist-product.json
{
"category": [{
"term_id": "10",
"name": "Arden Grange",
"slug": "arden-grange",
"products": [{
"ID": "47",
"post_title": "Arden Grange, Premium",
"post_date": "2015-10-20 16:13:04",
"post_author": "5"
}, {
"ID": "50",
"post_title": "Arden Grange Puppy\/Junior Large Breed",
"post_date": "2015-10-21 04:56:23",
"post_author": "5"
}, {
"ID": "53",
"post_title": "Arden Grange Weaning\/Puppy",
"post_date": "2015-10-22 12:52:35",
"post_author": "5"
}]
}, {
"term_id": "8",
"name": "Menu 1",
"slug": "menu-1",
"products": [{
"ID": "38",
"post_title": "Home",
"post_date": "2015-10-20 10:43:44",
"post_author": "1"
}, {
"ID": "30",
"post_title": "",
"post_date": "2015-10-20 10:13:56",
"post_author": "1"
}, {
"ID": "31",
"post_title": "",
"post_date": "2015-10-20 10:13:57",
"post_author": "1"
}]
}]
}
CategoryController.js
app.controller('CategoryController', ['$scope','category', function($scope, category) {
category.success(function(data) {
$scope.userslists = data;
});
}]);
ProductController.js
app.controller('ProductController', ['$scope', '$routeParams', 'category', function($scope, $routeParams, category,products) {
category.success(function(data) {
$scope.users = data.category[$routeParams.id];
});
}]);
category.js(服务文件)
app.factory('category', ['$http', function($http) {
return $http.get('http://localhost/youtubewebservice/shop-categorylist-product.php')
.success(function(data) {
return data;
})
.error(function(err) {
return err;
});
}]);
category.html
<ion-view>
<ion-content scroll="true" has-bouncing="false" class="has-header nk-colorGrey">
<div class="users" ng-repeat="users in userslists.category | filter:searchBox">
<a href="#/{{$index}}" style="text-decoration:none;">
<ion-item class="item widget uib_w_109 d-margins item-button-right" data-uib="ionic/list_item_button" data-ver="0">{{ users.name }} {{ users.post_title }}
<label style="display:none;">{{ users.term_id }}</label>
<form method="POST" style="display:none;">
<input type="SUBMIT" name="search" value="{{ users.term_id }}" />
<input type="SUBMIT" name="submit" value="search" />
</form>
<button class="button button-balanced button-clear">
<i class="icon ion-arrow-graph-up-right ion"></i>
</button>
</ion-item>
<!--h2 class="name"> {{ users.age }} </h2-->
</a>
</div>
</ion-content>
</ion-view>
users.html(这是product.html页面)
<ion-view>
<ion-content scroll="true" has-bouncing="false" class="has-header nk-colorGrey">
<div class="users-detail">
<h2 class="users-name"> {{ users.name }} </h2>
<h2 class="name"> {{ product-post_title }} </h2>
<h2 class="users-name"> {{ users.name }} </h2>
<h2 class="name"> {{ users.term_id }} </h2>
<h2 class="name"> {{ users.term_id }} </h2>
</div>
</ion-content>
</ion-view>
app.js
var app = angular.module('LookApp', ['ionic','ngCordova','ngRoute']);
app.config(function($stateProvider, $urlRouterProvider,$routeProvider) {
$routeProvider
.when('/', {
controller: 'CategoryController',
templateUrl: 'views/category.html'
})
.when('/:id', {
controller: 'ProductController',
templateUrl: 'views/users.html'
})
.when('/login/:friendId', {
controller: 'LoginController',
templateUrl: 'views/login.html'
})
.otherwise({
redirectTo: '/'
});
});
推荐答案
你需要这样做
类别页面
<div class="users" ng-repeat="users in userslists.category | filter:searchBox track by $index" ng-click="save($index)">
controllers.js
app.controller('CategoryController', ['$scope','$http', function($scope, category) {
$http.get('http://localhost/youtubewebservice/shop-categorylist-product.php')
.success(function(data) {
$scope.userslists = data;
})
.error(function(err) {
return err;
});
$scope.save() = function(index) {
$rootScope.index = index;
}
}]);
app.controller('ProductController', ['$scope', function() {
}]);
产品页面
<div class="users-detail">
<h2 class="users-name"> {{ userslists[index].category.name }} </h2>
<h2 class="name"> {{ userslists[index].category.products.post_title }} </h2>
<h2 class="users-name"> {{ userslists[index].category.name }} </h2>
<h2 class="name"> {{ userslists[index].category.term_id }} </h2>
<h2 class="name"> {{ userslists[index].category.term_id }} </h2>
</div>
这篇关于如何获取其他页面的数组详细信息的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!