1

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/

Mistalis
  • 17,793
  • 13
  • 73
  • 97
PalmThreeStudio
  • 489
  • 8
  • 21
  • 1
    Possible duplicate of [How to use filter in ng-if and variable?](https://stackoverflow.com/questions/31455567/how-to-use-filter-in-ng-if-and-variable) – Mistalis May 24 '17 at 15:01

5 Answers5

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

Matthew Green
  • 10,161
  • 4
  • 36
  • 54
2

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>
Mistalis
  • 17,793
  • 13
  • 73
  • 97
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>
Stanislav Lohtin
  • 81
  • 1
  • 6
1

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>
Manikandan Velayutham
  • 2,228
  • 1
  • 15
  • 22
1

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>
Ashwin
  • 211
  • 1
  • 7