我想创建一个包含一些嵌套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;
});
},
}
});
有人能伸出援助之手吗?提前谢谢。