在角度离子中继器中隐藏列表项

我正在构建一个列表控件，用户可以在其中筛选数据。列表控件有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}}&nbsp;<i class="icon ion-ios-close-empty"></i> 
       &nbsp;<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：

http://plnkr.co/6YdnId

来源

2015-10-20 Sonu Kapoor