1

i listed category from json data.i have listed number of sub category under category but i want to list only 3 sub category under category.if i click view more option i want to list corresponding sub category depends on category in modal popup.

i have returned created div depends on parentid zero 

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

i have updated my code in plunker.

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

vivek
  • 383
  • 2
  • 23

3 Answers3

2

You can do it by simlpe filter:

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

Demo 1 plunker

It also will get rid of using ng-if="childItem.parentid === item.id"

Example:

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

If you want to handle view more, you can write:

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

and:

$scope.limit = 3;

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

Demo 2 plunker

[EDIT]

if you want to update view more per sub-category, you need bind limit to your 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>

and:

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

Demo 3 plunker

Maxim Shoustin
  • 77,483
  • 27
  • 203
  • 225
1

Update

If you want a show more functionality refer the below Plunkr.

Plunkr

This will do the job. I have added a custom filter that takes the parent.Id as an argument and check the child's parent Id (which was done before by the ng-if). Then I use angular's limit to: 3 filter to limit the results to only 3 items.

Plunkr

Code:

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

and the ng-repeat should look like

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

References:

  1. Limit To

  2. passing arguements to angularJS filters

Naren Murali
  • 19,250
  • 3
  • 27
  • 54
1

UPDATE -

As per your latest requirement -

if i click view more i want to list all corresponding sub category depends on category

I update the plnkr to show all categories in a popup once user clicked on View More button.

Updated Plnkr - http://plnkr.co/edit/OUvzqWdfZuQnZpbXWSRW?p=preview

As per your requirement I believe you need to show/hide sub categories on the basis of button click available under specific category.

I re arranged your data and rather than saving it into multiple objects, I am using a singular object newcat to store and manage the UI.

Working Plnkr -

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>
swapnesh
  • 26,318
  • 22
  • 94
  • 126