javascript - Json 数组详细信息显示在带有 ionic 的 angularjs 中的三个页面中

标签 javascript jquery angularjs json ionic-framework

我有类别数组。有更多的产品。 我需要在类别页面中显示类别。 单击类别时,我必须重定向产品页面并显示必要的产品。 单击产品时,我必须重定向 product_details 页面并显示必要的产品详细信息。

类别加载到类别页面,点击它会重定向到产品页面。但是,我看不到产品。 这些 Controller 的错误是什么,以及如何创建“product_details.html”和“product.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];

});
}]);

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: '/'

});

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; 
        }); 
}]);

最佳答案

看到你已经把你的数据放在 $scope.userlists 中,所以当你在 html 中调用你的数据时,你需要这样做
分类页

<div ng-repeat="user in userslists">
Term ID : {{user.category.term_id}}
Name    : {{user.category.name}}
</div>

产品页面

<div ng-repeat="user in userslists">
Post Title : {{user.category.products.post_title}}
ID         : {{user.category.products.ID}}
</div>

详细信息页面

<div ng-repeat="user in userslists">
Post Title : {{user.category.products.post_title}}
Post Date  : {{user.category.products.post_date}}
Post Author: {{user.category.products.post_author}}
ID         : {{user.category.products.ID}}
</div>

关于javascript - Json 数组详细信息显示在带有 ionic 的 angularjs 中的三个页面中,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37107684/

相关文章:

javascript - 如何在动画完成之前停止按下导航按钮?

javascript - 无需重新加载页面的数组中的 PHP 随机值

angularjs - 在数组中的每个元素上设置 $scope.$watch

javascript - Angularjs - Angular UI 网格 : It's possible to filter dynamically dropdown options by rowentity values?

javascript - 如何将删除的字符串保存在新字符串中

jQuery Form Builder 配置精细 uploader

javascript - 为什么 td max-width 在这种情况下不起作用?

javascript - Bootstrap Carousel 不适用于 AngularJS

javascript - "ERROR db._checkNotDeleted is not a function"尝试更新我的数据库时

javascript - 下载类型为 'text/csv' 的 Blob 剥离 Unicode BOM