AngularJS通过NG-如果

我寻找这个问题的解决方案获取过滤数组的长度：AngularJS通过NG-如果

当我们用NG-如果在阵列过滤的数据（创建者NG-重复），我们怎么能拿到过滤数组的长度？例如，如果我们知道如何做到这一点，我们可以知道有多少用户在线，例如（我知道我们可以找到另一个解决方案，但我真的想知道我们是否可以通过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/

来源

2017-05-24 PositivProd

的可能的复制[如何在NG-IF和可变使用过滤器？（https://stackoverflow.com/questions/31455567/how-to-use-filter-in -ng-if-and-variable） – Mistalis

你会使用the alias_expression option of ngRepeat做到这一点。

改变你ngRepeat以下几点：

ng-repeat="user in lists as filteredList"

那么将允许你检查使用filteredList.length

来源

2017-05-24 14:44:57

有一如既往多种方式来实现这一目标的长度是正常的，但这里是其中之一：

您可以使用角度滤波从你的阵列（https://docs.angularjs.org/api/ng/filter/filter）

得到一个子阵

来源

2017-05-24 14:49:55

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

来源

2017-05-24 15:04:40 Mistalis

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>

来源

2017-05-24 15:08:31

我喜欢你的方法，但如果我们想过滤一个数字（用>或<或==），我们该怎么做？ – PositivProd

为什么你不能使用foreach循环得到仅从$范围过滤后的数据的建议.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>

来源

2017-05-24 18:31:05 Ashwin

AngularJS通过NG-如果

回答

相关问题