I am creating a customizable list control where users can filter through different data levels. This list control consists of 4 hierarchical levels with numerous items. Initially, only the first level item is displayed. Upon clicking on the first level, the second level appears while hiding the first one. Subsequently, the user can click on the second level to reveal the third level and hide the second level, and so on.
When selecting a specific first-level item, all other first-level items should be hidden. Currently, when choosing a first-level item, the second level becomes visible for all first-level items. Ideally, upon selecting a first-level item, all other first-level options should disappear to streamline the filtering process within the selected category. For example, if "Men" is selected, then the "Womens" section should be automatically hidden.
The hierarchical structure is as follows:
Department -> Product Type -> Style -> Color Size Combination
The JSON data is already organized following this hierarchy:
[
{
"departmentName":"Womens",
"productTypes":[
{
"name":"Standard",
"styles":[
{
"name":"2001",
"details":[
{
"color":"blue",
"size":"m",
"productNum":1234567891212
},
{
"color":"blue",
"size":"x",
"productNum":1234567891212
},
{
"color":"blue",
"size":"xxl",
"productNum":1234567891212
},
{
"color":"blue",
"size":"s",
"productNum":1234567891212
}
]
}
]
}
]
},
{
"departmentName":"Men",
"productTypes":[
{
"name":"Standard",
"styles":[
{
"name":"2001Men",
"details":[
{
"color":"green",
"size":"m",
"productNum":1234567891212
},
{
"color":"green",
"size":"x",
"productNum":1234567891212
},
{
"color":"green",
"size":"xxl",
"productNum":1234567891212
},
{
"color":"green",
"size":"s",
"productNum":1234567891212
}
]
}
]
}
]
}
]
Below is the corresponding HTML code:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title></title>
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" type="text/css" href="http://code.ionicframework.com/1.0.0-beta.11/css/ionic.min.css">
<script src="http://code.ionicframework.com/1.0.0-beta.11/js/ionic.bundle.min.js"></script>
<script src="script.js"></script>
</head>
<body ng-app='todo'>
<ion-pane>
<ion-content>
<div class="container padding" style="background-color: #fff;" ng-controller="MyCtrl">
<div class="row">
<div class="col col-100">
<span ng-repeat="f in filter">
{{f}} <i class="icon ion-ios-close-empty"></i>
<i class="icon ion-ios-arrow-thin-right" ng-show="$index < (filter.length-1)"></i>
</span>
</div>
</div>
<div class="list" ng-repeat="item in filterData">
<div class="item item-divider" ng-click="setFilter(item.departmentName, 1);" ng-show="showDepartments">
{{item.departmentName}}
</div>
<div ng-repeat="pt in item.productTypes">
<div class="item item-divider" ng-click="setFilter(pt.name, 2);" ng-show="showProductTypes">
{{pt.name}}
</div>
<div ng-repeat="style in pt.styles">
<div class="item item-divider" ng-click="setFilter(style.name, 3);" ng-show="showStyles">
{{style.name}}
</div>
<div ng-repeat="styleLine in style.details">
<div class="item item-divider" ng-click="setFilter(styleLine, 4);" ng-show="showStyleDetails">
{{styleLine.color}} - {{styleLine.size}}
<br/> {{styleLine.productNum}}
</div>
</div>
</div>
</div>
</div>
</div>
</ion-content>
</ion-pane>
</body>
</html>
Here is the JavaScript code:
angular.module('todo', ['ionic'])
.controller('MyCtrl', function($scope) {
$scope.filter = [];
$scope.showDepartments = true;
$scope.showProductTypes = false;
$scope.showStyles = false;
$scope.showStyleDetails = false;
$scope.setFilter = function(filterValue, level) {
if (level != 4) {
$scope.filter[$scope.filter.length] = filterValue;
} else {
$scope.filter[$scope.filter.length] = filterValue.color;
$scope.filter[$scope.filter.length] = filterValue.size;
}
if (level == 1) {
$scope.showDepartments = false;
$scope.showProductTypes = true;
}
if (level == 2) {
$scope.showProductTypes = false;
$scope.showStyles = true;
}
if (level == 3) {
$scope.showStyles = false;
$scope.showStyleDetails = true;
}
if (level == 4) {
$scope.showStyleDetails = false;
}
}
$scope.title = 'Ionic';
$scope.filterData = [{
"departmentName": "Womens",
"productTypes": [{
"name": "Standard",
"styles": [{
"name": "2001",
"details": [{
"color": "blue",
"size": "m",
"productNum": 1234567891212
}, {
"color": "blue",
"size": "x",
"productNum": 1234567891212
}, {
"color": "blue",
"size": "xxl",
"productNum": 1234567891212
}, {
"color": "blue",
"size": "s",
"productNum": 1234567891212
}]
}]
}]
}, {
"departmentName": "Men",
"productTypes": [{
"name": "Standard",
"styles": [{
"name": "2001Men",
"details": [{
"color": "green",
"size": "m",
"productNum": 1234567891212
}, {
"color": "green",
"size": "x",
"productNum": 1234567891212
}, {
"color": "green",
"size": "xxl",
"productNum": 1234567891212
}, {
"color": "green",
"size": "s",
"productNum": 1234567891212
}]
}]
}]
}];
})
Access the Plunkr demo by clicking on the following link: