ограничить количество элементов, показанных во втором ng-repeat

Question

Я перечислил категорию из json data.i перечислил количество подкатегорий в категории, но я хочу перечислить только 3 подкатегории в категории. Если я нажму на просмотр дополнительной опции, я хочу перечислить соответствующую подкатегорию в зависимости от категории в модальном всплывающем окне.

Я вернулся созданный div зависит от нуля парентиды

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

Я обновил свой код в Plunker.

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

javascript angularjs json

1

vivek 26 Авг 2017 в 21:47

Answer 1

< Сильный > Обновление

Если вы хотите, чтобы показать больше функциональности, обратитесь к ниже Plunker.

Plunkr

Это сделает работу. Я добавил пользовательский фильтр, который принимает parent.Id в качестве аргумента и проверяет родительский идентификатор дочернего элемента (что было сделано ранее с помощью ng-if). Затем я использую фильтр limit to: 3 angular, чтобы ограничить результаты только 3 пунктами.

Plunkr

< Сильный > Код:

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

И нг-повтор должен выглядеть так

<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>

Рекомендации:

1

Naren Murali 27 Авг 2017 в 04:41

Answer 2

ОБНОВЛЕНИЕ -

Согласно вашему последнему требованию -

если я нажму на просмотр больше, я хочу перечислить все соответствующие подкатегории зависит от категории

Я обновляю plnkr для отображения всех категорий во всплывающем окне после того, как пользователь нажал кнопку View More.

Обновлен Plnkr - http://plnkr.co/edit/OUvzqWdfZuQnZpbXWSRWap=prep

В соответствии с вашим требованием, я считаю, вам нужно показать / скрыть подкатегории на основе нажатия кнопки, доступной в определенной категории.

Я упорядочил ваши данные и вместо того, чтобы сохранять их в несколько объектов, я использую отдельный объект newcat для хранения и управления пользовательским интерфейсом.

Рабочая Плнкр -

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

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

<!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>

1

swapnesh 27 Авг 2017 в 07:15

Answer 3

Вы можете сделать это простым фильтром:

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

Плункер Demo 1

Это также избавит от использования 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

< Сильный > [ EDIT ]

Если вы хотите обновить 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

2

Maxim Shoustin 27 Авг 2017 в 06:20

ограничить количество элементов, показанных во втором ng-repeat

3 ответа

Связанные вопросы

Новые вопросы

javascript