AngularJS - 通过 ng-if 获取过滤数组的长度 - AngularJS - Get length of filtered array by ng-if 小贝子编程网

>我搜索这个问题的解决方案：

当我们使用 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/

您可以使用ngRepeat的alias_expression选项来执行此操作。

将 ngRepeat 更改为以下内容：

ng-repeat="user in lists as filteredList"

然后允许您使用filteredList.length正常检查长度

这是一个使用 {{(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>

一如既往，

有多种方法可以实现这一点，但这里是其中之一：

您可以使用角度过滤器从数组中获取子数组 (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>

<</div> div class="one_answers">

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>

为什么不能使用 foreach 循环仅从 $scope.list 中获取过滤后的数据。

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

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 获取过滤数组的长度

相关内容

最新更新

热门标签：