AngularJS - Get length of filtered array by ng-if

Question

I search a solution for this problem:

When we use ng-if for filtered data in array (Created by ng-repeat), how can we get the length of filtered array?

This is a crucial question, because if we know how to do that, we can know how many user are online, for example (I know we can found another solution for that, but I really want to know if we can get length of filtered array by ng-if).

HTML :

<div id="body">
  <div ng-controller="startController">
    <p ng-repeat="user in lists" ng-if="user.dispo == true">{{user.name}}</p>
    Il y a {{lists.length}} membres connectées. <br> <br>

    (Normally, whe must have only 4 members online ...)

  </div>
</div>

JS :

angular.module('app', [])

.controller('startController', ['$scope', function($scope) {

  $scope.lists = [{
    id: 0,
    name: 'Ambre',
    situation: 'confirmed',
    lastText: 'Tu vas bien ?',
    dispo: true,
    face: 'img/girl1.jpg',
    age: 19,
    gender: 'female',
    inChat: false,
    description: ":p"
  }, {
    id: 1,
    name: 'Mélanie',
    lastText: 'J\'habite à Marseille !',
    situation: 'waiting',
    dispo: false,
    face: 'img/girl2.jpg',
    age: 21,
    gender: 'female',
    inChat: false,
    description: "Vive la vie ! 😇"
  }, {
    id: 2,
    name: 'Lana',
    lastText: 'Ça marche à demain :)',
    situation: 'confirmed',
    dispo: true,
    face: 'img/girl3.jpg',
    age: 18,
    gender: 'female',
    inChat: true,
    description: "Je suis bavarde ! 😎"
  }, {
    id: 3,
    name: 'Vicky',
    lastText: 'Serveuse et toi ?',
    situation: 'waiting',
    dispo: true,
    face: 'img/girl4.jpg',
    age: 22,
    gender: 'female',
    inChat: false,
    description: "Snap : Vickdng 👻"
  }, {
    id: 4,
    name: 'Mina',
    lastText: 'Je ne sais pas ...',
    situation: 'confirmed',
    dispo: true,
    face: 'img/girl5.jpg',
    age: 26,
    gender: 'female',
    inChat: false,
    description: 'Jeune toulousaine ne cherchant rien en particulier. 🙄'
  }];

}]);

setTimeout(function() {
  angular.bootstrap(document.getElementById('body'), ['app']);
});

I have create a JSFiddle here: http://jsfiddle.net/PositivProd/51bsbzL0/319/

Possible duplicate of How to use filter in ng-if and variable? — Mistalis
– Mistalis, Commented May 24, 2017 at 15:01

Matthew Green · Accepted Answer · 2017-05-24 14:44:57Z

3

You would use the alias_expression option of ngRepeat to do this.

Changing your ngRepeat to the following:

ng-repeat="user in lists as filteredList"

would then allow you to check the length as normal using filteredList.length

answered May 24, 2017 at 14:44

Matthew Green

10.4k4 gold badges41 silver badges57 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Mistalis · Accepted Answer · 2017-05-24 15:04:40Z

Here is a suggestion using {{(lists | filter: {dispo:true}).length}}

var myApp = angular.module('mainApp', []);

function mainController($scope) {
  $scope.lists = [{
    name: 'Ambre',
    dispo: true
  }, {
    name: 'Mélanie',
    dispo: false
  }, {
    name: 'Lana',
    dispo: true
  }, {
    name: 'Vicky',
    dispo: true
  }, {
    name: 'Mina',
    dispo: true
  }];
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="mainApp" ng-controller="mainController">
  <div>Il y a {{lists.length}} membres au total.</div>
  <div>Il y a {{(lists|filter:{dispo:true}).length}} membres connectés :</div>
  <ol>
    <li ng-repeat="user in lists | filter: {dispo: true}">{{user.name}}</li>
  </ol>
</div>

Stanislav Lohtin · Accepted Answer · 2017-05-24 14:49:55Z

1

There are as always multiple ways to achieve this, but here is one of them:

You can use angular filter to get a subarray from your array (https://docs.angularjs.org/api/ng/filter/filter)

<div id="body">

<div ng-controller="startController">
    <p ng-repeat="user in lists | filter:{dispo:true}">{{user.name}}</p>
    Il y a {{lists.length}} membres connectées. <br> <br>

    (Normally, whe must have only 4 members online ...)

  </div>
</div>

answered May 24, 2017 at 14:49

Stanislav Lohtin

811 silver badge6 bronze badges

Comments

Manikandan Velayutham · Accepted Answer · 2017-05-24 15:08:31Z

angular.module('app', [])
.controller('startController', ['$scope', function($scope) {

  $scope.lists = [{
    id: 0,
    name: 'Ambre',
    situation: 'confirmed',
    lastText: 'Tu vas bien ?',
    dispo: true,
    face: 'img/girl1.jpg',
    age: 19,
    gender: 'female',
    inChat: false,
    description: ":p"
  }, {
    id: 1,
    name: 'Mélanie',
    lastText: 'J\'habite à Marseille !',
    situation: 'waiting',
    dispo: false,
    face: 'img/girl2.jpg',
    age: 21,
    gender: 'female',
    inChat: false,
    description: "Vive la vie ! 😇"
  }, {
    id: 2,
    name: 'Lana',
    lastText: 'Ça marche à demain :)',
    situation: 'confirmed',
    dispo: true,
    face: 'img/girl3.jpg',
    age: 18,
    gender: 'female',
    inChat: true,
    description: "Je suis bavarde ! 😎"
  }, {
    id: 3,
    name: 'Vicky',
    lastText: 'Serveuse et toi ?',
    situation: 'waiting',
    dispo: true,
    face: 'img/girl4.jpg',
    age: 22,
    gender: 'female',
    inChat: false,
    description: "Snap : Vickdng 👻"
  }, {
    id: 4,
    name: 'Mina',
    lastText: 'Je ne sais pas ...',
    situation: 'confirmed',
    dispo: true,
    face: 'img/girl5.jpg',
    age: 26,
    gender: 'female',
    inChat: false,
    description: 'Jeune toulousaine ne cherchant rien en particulier. 🙄'
  }];

}]);

setTimeout(function() {
  angular.bootstrap(document.getElementById('body'), ['app']);
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.3/angular.min.js"></script>
<div id="body">
  <div ng-controller="startController">
    <p ng-repeat="user in filterData=(lists | filter:{dispo:true})"><span ng-if="user.dispo == true">{{user.name}}</span></p>
    Il y a {{lists.length}} membres connectées. <br>dispo : {{filterData.length}} <br>
    
    (Normally, whe must have only 4 members online ...)
    
  </div>
</div>

I like your approach, but if we want filter a number (with > or < or ==), how can we do it ?

Ashwin · Accepted Answer · 2017-05-24 18:31:05Z

Why can't you use the foreach loop to get only the filtered data from $scope.lists.

Then you can find the length of the filtered array and display it.

angular.module('app', [])

.controller('startController', ['$scope', function($scope) {
 $scope.filteredvalue =[];
  $scope.lists = [{
    id: 0,
    name: 'Ambre',
    situation: 'confirmed',
    lastText: 'Tu vas bien ?',
    dispo: true,
    face: 'img/girl1.jpg',
    age: 19,
    gender: 'female',
    inChat: false,
    description: ":p"
  }, {
    id: 1,
    name: 'Mélanie',
    lastText: 'J\'habite à Marseille !',
    situation: 'waiting',
    dispo: false,
    face: 'img/girl2.jpg',
    age: 21,
    gender: 'female',
    inChat: false,
    description: "Vive la vie ! 😇"
  }, {
    id: 2,
    name: 'Lana',
    lastText: 'Ça marche à demain :)',
    situation: 'confirmed',
    dispo: true,
    face: 'img/girl3.jpg',
    age: 18,
    gender: 'female',
    inChat: true,
    description: "Je suis bavarde ! 😎"
  }, {
    id: 3,
    name: 'Vicky',
    lastText: 'Serveuse et toi ?',
    situation: 'waiting',
    dispo: true,
    face: 'img/girl4.jpg',
    age: 22,
    gender: 'female',
    inChat: false,
    description: "Snap : Vickdng 👻"
  }, {
    id: 4,
    name: 'Mina',
    lastText: 'Je ne sais pas ...',
    situation: 'confirmed',
    dispo: true,
    face: 'img/girl5.jpg',
    age: 26,
    gender: 'female',
    inChat: false,
    description: 'Jeune toulousaine ne cherchant rien en particulier. 🙄'
  }];

//angular foreach loop ******************************

angular.forEach($scope.lists, function(value , key) {
            if(value.dispo == true){
            $scope.filteredvalue.push(value[key])
            }
        })
///angular foreach loop ******************************        
}]);

setTimeout(function() {
  angular.bootstrap(document.getElementById('body'), ['app']);
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div id="body">
  <div ng-controller="startController">
    <p ng-repeat="user in lists" ng-if="user.dispo == true">{{user.name}}</p>
    Il y a {{filteredvalue.length}} membres connectées. <br> <br>
    
    (Normally, whe must have only 4 members online ...)
    
  </div>
</div>

Collectives™ on Stack Overflow

AngularJS - Get length of filtered array by ng-if

5 Answers 5

Comments

Comments

Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related