Question

我搜索此问题的解决方案：

当我们对数组中的过滤数据使用ng-if时（由ng-repeat创建），我们如何获得过滤数组的长度？

这是一个至关重要的问题，因为如果我们知道如何做到这一点，我们可以知道有多少用户在线，例如（我知道我们可以找到另一个解决方案，但我真的想知道我们是否可以获得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']);
});

我在这里创建了一个JSFiddle：http://jsfiddle.net/PositivProd/51bsbzL0/319/

Answer 1

您可以使用the alias_expression option of ngRepeat执行此操作。

将ngRepeat更改为以下内容：

ng-repeat="user in lists as filteredList"

然后

允许您使用filteredList.length

检查长度是否正常

Answer 2

总有多种方法可以实现这一目标，但这里有一种方法：

您可以使用角度过滤器从阵列中获取子阵列（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>

Answer 3

以下是使用{{(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>

Answer 4

Field Today Yesterday ChangePercent 
----- ----- --------- ------------- 
A     1.1   1         10            
B     2.1   2         5             
C     3.1   3         3.33          
D     4.1   4         2.5

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

Answer 5

为什么不能使用foreach循环来获取$ scope.lists中的过滤数据。

然后你可以找到过滤后的数组的长度并显示它。

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>

AngularJS - 通过ng-if获取过滤数组的长度

5 个答案: