如何在另一个页面获取数组详细信息

Posted 2023-03-05

【中文标题】如何在另一个页面获取数组详细信息

【英文标题】：How to get array details another page

【发布时间】：2016-09-03 08:13:52

【问题描述】：

我有类别数组。还有更多的产品。 我需要在类别页面中显示类别。 当点击一个类别时，我必须重定向产品页面并显示必要的产品。 单击产品时，我必须重定向 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: '/'
  );
);

【参考方案1】：

你需要这样做分类页面

<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>

【讨论】：

在产品页面中输入任何内容之前，只需在 ion-content 之后在产品页面中尝试 index。如果您在那里获得索引值，那么这对您有用。这是我在代码中使用的一个简单技巧。希望它也对你有用。

我需要什么 controller.js 改变我的朋友。请告诉我

查看您需要做的就是首先将您的 json 数据放入 $scope，您已经这样做了。然后在 html 中获取数据，就像在类别页面中获取数据一样。现在要转到特定类别的产品，您需要将该列表的 $index 值保存在变量中，如 $rootscope 并在产品页面中获取它。