Question

我正在构建一个列表控件，用户可以在其中过滤数据。列表控件有4个级别，包含多个项目。默认情况下，第一级项目仅显示。用户单击第一级后，将显示第二级，并隐藏第一级。然后用户可以点击第二级，在这种情况下，第三级将出现并隐藏第二级等。

当我选择第一级时，所有其他第一级也需要隐藏。现在，当我选择第一个级别时，第二个级别项目将显示第二个级别。一旦选择了第一级别，则需要隐藏所有其他第一级别，因为用户将在他选择的第一级别内进行过滤。在下面的plunkr中，您将看到两个部门，如果我选择“Men”，则应隐藏“Womens”部分。

层次结构是：

部门 - ＆gt;产品类型 - ＆gt;风格 - ＆gt;颜色大小组合

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
        }]
      }]
    }]
  }];
})

最后是那个傻瓜：

http://plnkr.co/6YdnId

Answer 1

我得到了它的工作。我在项目本身上使用了一个属性来隐藏除所选项目之外的所有项目的第一级别。我更新了plunkr。希望这有助于某人。

Answer 2

您应该使用过滤器工厂并适用于ng-repeat https://docs.angularjs.org/guide/filter

隐藏角度离子转发器中的列表项

2 个答案: