CODEWITHSUNDEEP
javascriptangularjsarrays
Younes Yaas
Younes Yaas

Reputation: 498

AngularJS - Get length of filtered array by ng-if

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/

Upvotes: 1

Views: 2275

Answers (5)

Ashwin
Ashwin

Reputation: 211

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>

Upvotes: 1

Manikandan Velayutham
Manikandan Velayutham

Reputation: 2228

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>

Upvotes: 1

Mistalis
Mistalis

Reputation: 18279

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>

Upvotes: 2

Stanislav Lohtin
Stanislav Lohtin

Reputation: 81

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>

Upvotes: 1

Matthew Green
Matthew Green

Reputation: 10401

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

Upvotes: 3

Related Questions