Question

我列出了来自json data.i的类别列出了类别下的子类别的数量但是我想在类别下仅列出3个子类别。如果我点击查看更多选项我想列出相应的子类别取决于模态弹出窗口中的类别

我已经返回创建的div取决于parentid zero

  $scope.cat = categories.filter(function(category) {
    return category && category.parentid === 0
  });

我在plunker中更新了我的代码。

http://plnkr.co/edit/Vh1NzYf0qjUkIygLUEJk?p=preview

Answer 1

你可以通过simlpe过滤器来实现：

<div ng-repeat="childItem in content | filter: item.id | limitTo: 3">

Demo 1 plunker

它也将摆脱使用ng-if="childItem.parentid === item.id"

示例：

<div ng-repeat="item in cat">
    {{item.name}}
    <div ng-repeat="childItem in content | filter: item.id | limitTo: 3">
     <div style="margin-left: 20px;" >
     {{childItem.name}}
     </div>
    </div>
  </div>

如果你想处理view more，你可以写：

<div ng-repeat="childItem in content | filter: item.id | limitTo: limit">

和

$scope.limit = 3;

 $scope.viewMore = function(){
   $scope.limit = 100;
 }

Demo 2 plunker

<强> [编辑]

如果您想更新每个子类别的view more，则需要对data进行绑定限制：

<body ng-controller="MainCtrl">
  <div ng-repeat="item in cat">
    {{item.name}}
    <div ng-repeat="childItem in content | filter: item.id | limitTo: item.limit">
     <div style="margin-left: 20px;" >
     {{childItem.name}}
     </div>         
    </div>
    <a href="" ng-click="viewMore(item)" 
               ng-if="item.limit == 3">view more</a>
  </div>
</body>

和

$scope.viewMore = function(item){
   item.limit = 100;
}

Demo 3 plunker

Answer 2

<强>更新

如果您想要更多功能，请参阅下面的Plunkr。

Plunkr

这将完成这项工作。我添加了一个自定义过滤器，它将parent.Id作为参数并检查子项的父Id（之前由ng-if完成）。然后我使用angular limit to: 3过滤器将结果限制为只有3个项目。

Plunkr

<强>代码：

$scope.searchMe = function(statusId) {
    return function(user) { 
        return user.parentid === statusId;
    }
}

并且ng-repeat应该看起来像

<div ng-repeat="item in cat">
    {{item.name}}
    <div ng-repeat="childItem in content | filter: searchMe(item.id) | limitTo: 3">
     <div style="margin-left: 20px;">
     {{childItem.name}}
     </div>
    </div>
    <a ng-click="open_modalpopup()">view more</a>
  </div>

参考文献：

Answer 3

更新 -

根据您的最新要求 -

如果我点击查看更多我想列出所有相应的子类别取决于类别

我更新plnkr，一旦用户点击View More按钮，就会在弹出窗口中显示所有类别。

更新了Plnkr - http://plnkr.co/edit/OUvzqWdfZuQnZpbXWSRW?p=preview

根据您的要求，我认为您需要根据特定类别下的按钮点击显示/隐藏子类别。

我安排了您的数据，而不是将其保存到多个对象中，我使用单个对象newcat来存储和管理UI。

工作Plnkr -

http://plnkr.co/edit/F6MlkMWOJ2b7isRAM1u6?p=preview

＆＃13;

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope) {

var data = [{
    id: 1,
    name: 'mobile',
    parentid: 0
  }, {
    id: 2,
    name: 'samsung',
    parentid: 1
  }, {
    id: 3,
    name: 'moto',
    parentid: 1
  }, {
    id: 4,
    name: 'redmi',
    parentid: 1
  }, {
    id: 5,
    name: 'honor',
    parentid: 1
  }, {
    id: 6,
    name: 'nokia',
    parentid: 1
  },
  {
    id: 7,
    name: 'tv',
    parentid: 0
  }, {
    id: 8,
    name: 'tv1',
    parentid: 7
  }, {
    id: 9,
    name: 'tv2',
    parentid: 7
  }, {
    id: 10,
    name: 'tv3',
    parentid: 7
  }, {
    id: 11,
    name: 'tv4',
    parentid: 7
  }, {
    id: 12,
    name: 'tv5',
    parentid: 7
  }];
  var categories = data;

  $scope.title = 'Show Hide Subcategories';

  $scope.cat = categories.filter(function(category) {
    return category && category.parentid === 0
  });

  $scope.newcat = angular.extend($scope.cat, {});

  angular.forEach($scope.cat, function(cat, key){
    var tmpIndex = 0;
    var tmpdata = categories.filter(function(category) {
      if(cat.id === category.parentid) {
        category.indexVal = tmpIndex;
        category.isShow = tmpIndex < 3 ? true : false;        
        tmpIndex++;
        return true;
      }
    })
    $scope.newcat[key]['subCat'] = tmpdata;
    $scope.newcat[key]['moreclicked'] = false;
  })

  $scope.showMore = function(index) {
    if(!$scope.newcat[index]['moreclicked']) {
      angular.forEach($scope.newcat[index].subCat, function(subcat, key) {
        subcat.isShow = true;
      })
      $scope.newcat[index]['moreclicked'] = true;
    }
    else {
      angular.forEach($scope.newcat[index].subCat, function(subcat, key) {
        if(key > 2)
          subcat.isShow = false;
      })
      $scope.newcat[index]['moreclicked'] = false;
    }
  };
});

＆＃13;

<!DOCTYPE html>
<html ng-app="plunker">

<head>
  <meta charset="utf-8" />
  <title>AngularJS Plunker</title>
  <script>
    document.write('<base href="' + document.location + '" />');
  </script>
  <link rel="stylesheet" href="style.css" />
  <script data-require="angular.js@1.5.x" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.11/angular.min.js" data-semver="1.5.11"></script>
  <script src="app.js"></script>
</head>

<body ng-controller="MainCtrl">
  <h3 ng-bind="title"></h3>
  <div ng-repeat="cat in newcat">
    <b>{{cat.name}}</b>
    <div ng-repeat="subcat in cat.subCat">
     <div style="margin-left: 20px;" ng-if="subcat.isShow">
     {{subcat.name}}
     </div>
    </div>
    <button ng-click="showMore($index)" ng-bind="!cat.moreclicked ? 'View More': 'View Less'"></button>
  </div>
</body>

</html>

＆＃13;

限制第2 ng-repeat中显示的项目数

3 个答案: