嵌套JSON的主细节

时间:2015-05-11 12:23:09

标签: javascript json angularjs ionic

我想创建一个包含一些嵌套JSON的主详细信息视图,但我没有想法。我知道我可能在这里遗漏了一些简单的东西,但我向大家求助。

这是JSON的示例。大约有50个项目具有相同的数字和字母模式(例如1a,30d等)。

{
   "Items": [
   {
      "Name": "Item 1",
      "Number: 1
      "Subcategories": [
       {
          "Name": Sub Item 1",
          "Letter: "A",
          "Description": "A description about the item..."
       }
          "Name": Sub Item 2",
          "Letter: "B",
          "Description": "A description about the item..."  
       }    
       }
          "Name": Sub Item 3"
          "Letter: "C",
          "Description": "A description about the item..."  
       }    
   }
}

我已经成功设置了一个带有手风琴的母版页,该手风琴列出了列表中的所有项目,当点击时,显示所有子项目,但我感到困惑的是当我点击子菜单项并被路由时到详细信息页面,我只能查看存储在$ state.params中的name参数。我希望详细信息页面也能够显示描述。

这是手风琴名单:

<div ng-repeat="item in items">
              <ion-item class="item-stable"
                        ng-click="toggleGroup(item)"
                        ng-class="{active: isGroupShown(item)}">
                  <i class="icon" ng-class="isGroupShown(item) ? 'ion-minus' : 'ion-plus'"></i>

                {{item.name}}
              </ion-item>
              <ion-item class="item-accordion"
                        ng-repeat="item_type in item.subcategories"
                        ng-show="isGroupShown(item)"
                        ng-click="onSelectItems(item_type)">
                  {{item_type.name}}
              </ion-item>
            </div>

以下是相关的app.js .config:

  .state('tab.item-listing', {
    url:'/item-listing',
    views: {
      'tab-home': {
        templateUrl: 'templates/item-listing.html',
        controller: 'itemListingsCtrl'
      }
    }
  })

  .state('tab.itemDetail', {
  url:'/:name',

  views: {
    'tab-home': {
      templateUrl: 'templates/item-detail.html',
      controller: 'itemListingDetailCtrl'
    }
  }
})

这是itemListingsCtrl控制器中的相关功能:

$scope.onSelectItems = function(item_type) {

        var params = {
            name: item_type.name,
        };

        $state.go('tab.itemDetail', params);

        console.log($state.params);

};

});

这是itemListingDetailCtrl的控制器:

.controller("itemListingDetailCtrl", function ($scope, itemService, $stateParams, $state)
{
  console.log($state.params);

  $scope.name = $state.params.name;


})

最后,这是来自service.js的相关部分,它引入了JSON。

.factory('itemService', function($http,$location) {

  var items = [];

  return {

    getitems: function(){
      return $http.get(/path/to/JSON).then(function(resp){

        items = resp.data.items;

        return items;

      });
    },

  }
});

有人能伸出援助之手吗?提前谢谢。

0 个答案:

没有答案