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

Hiding list item in angular ionic repeater

本文关键字：中继器 列表 项目 隐藏      更新时间：2023-09-26

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

当我选择第一个关卡时，那么所有其他的第一个关卡也需要被隐藏。现在，当我选择第一个关卡时，所有第一个关卡的道具都会出现第二个关卡。一旦选择了第一个关卡，所有其他的第一个关卡都需要被隐藏，因为用户将在他选择的第一个关卡中进行过滤。在下图中，你会看到两个部门，如果我选择"男性"，"女性"部分应该会被隐藏。

层次结构是:

部门->产品类型->款式->颜色尺寸组合

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

我让它工作了。我在项目本身上使用了一个属性来隐藏除选中项目之外的所有项目的第一层。我已经更新了plunkr。希望这能帮助到一些人。

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

相关文章：