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-如果

回答

相關問題