我正在构建一个列表控件,用户可以在其中筛选数据。列表控件有4个级别和多个项目。默认情况下,第一级项目只显示。一旦用户点击第一级,第二级显示,第一级隐藏。然后用户可以点击第二级,在这种情况下,第三级将出现,隐藏第二级等。在角度离子中继器中隐藏列表项
当我选择第一级时,所有其他第一级也需要隐藏。现在,当我选择第一级时,第二级显示所有第一级物品。一旦选择了第一级别,所有其他第一级别都需要隐藏,因为用户将在他选择的第一级别内进行筛选。在下面的plunkr中,您会看到两个部门,如果我选择“男士”,则应隐藏“女士”部分。
的层次是:
部 - >产品类型 - >样式 - >颜色尺寸组合
的JSON已经被结构化的过程是这样:
[
{
"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
}
]
}
]
}
]
}
]
下面是HTML:
<!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>
和JS:
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
}]
}]
}]
}];
})
最后的plunkr:
不知道如何做到这一点与我的概括问题的帮助。 –
它是使用控制器方法过滤数据的最正确方法 – Johan