Filterung funktioniert nicht auf Array von Objekten in AngularJS

Ich habe eine Liste von Produkten als Array von Objekt. Möchten Sie dies basierend auf den höchsten Sichten anzeigen. Ich habe versucht, den Dienst "orderBy" zu verwenden. Aber es filtert nicht von meinem angehängten Objekt-Array. Irgendwelche Vorschläge, wie man das macht?Filterung funktioniert nicht auf Array von Objekten in AngularJS

vm.products = [ 
 
     { 
 
     title : 'ABC', 
 
     imgSrc: '../../images/product1.png', 
 
     viewsCount: '183', 
 
     clicksCount: '34' 
 
     }, 
 
     { 
 
     title : 'DEF', 
 
     imgSrc: '../../images/product1.png', 
 
     viewsCount: '158', 
 
     clicksCount: '30' 
 
     }, 
 
     { 
 
     title : 'GHI', 
 
     imgSrc: '../../images/product1.png', 
 
     viewsCount: '86', 
 
     clicksCount: '32' 
 
     }, 
 
     { 
 
     title : 'JKL', 
 
     imgSrc: '../../images/product1.png', 
 
     viewsCount: '47', 
 
     clicksCount: '20' 
 
     }, 
 
     { 
 
     title : 'MNO', 
 
     imgSrc: '../../images/product1.png', 
 
     viewsCount: '62', 
 
     clicksCount: '22' 
 
     } 
 
    ];

<md-list> 
 
\t <md-list-item layout="row" layout-align="space-between center" 
 
\t \t ng-repeat="product in vm.products | orderBy:'product.viewsCount'" 
 
    ng-click="vm.latestSelectedIndex = $index; vm.selectProduct(product)" 
 
\t \t ng-show="!$first"> 
 
\t \t <div flex="80"> 
 
\t \t \t <h3 class="product-title">{{product.title}}</h3> 
 
\t \t </div> 
 
\t \t <div class="product-views" flex="20"> 
 
\t \t \t <div class="count">{{product.viewsCount}}</div> 
 
\t \t \t <div class="count-label"> Views </div> 
 
\t \t </div> 
 
\t </md-list-item> 
 
</md-list>

Quelle

2017-12-24 Tanvir Rahman

Es kann sein, weil Anzahl der Aufrufe Werte Strings sind, so dass sie sie so Sortierung alphabetisch zu sprechen, anstatt numerisch – user184994

ich es in Zahl umgewandelt. Jetzt geht es. Danke ... –

You dont Produkte zu erwähnen, nur der Feldname verwenden

<md-list-item layout="row" layout-align="space-between center" 
     ng-repeat="product in vm.products | orderBy:'viewsCount'"

EDIT:

auch die Eigenschaft viewsCount ist eine Zeichenfolge, Sie muss es als a analysieren Anzahl/Float-Wert wie folgt.

angular.forEach(vm.products, function (detail) { 
    detail.viewsCount = parseFloat(detail.viewsCount); 
});

DEMO

var app = angular.module('mainApp', ['ngMaterial']) 
 
app.controller('productsController',function(){ 
 
vm =this; 
 
vm.products = [ 
 
     { 
 
     title : 'ABC', 
 
     imgSrc: '../../images/product1.png', 
 
     viewsCount: '183', 
 
     clicksCount: '34' 
 
     }, 
 
     { 
 
     title : 'DEF', 
 
     imgSrc: '../../images/product1.png', 
 
     viewsCount: '158', 
 
     clicksCount: '30' 
 
     }, 
 
     { 
 
     title : 'GHI', 
 
     imgSrc: '../../images/product1.png', 
 
     viewsCount: '86', 
 
     clicksCount: '32' 
 
     }, 
 
     { 
 
     title : 'JKL', 
 
     imgSrc: '../../images/product1.png', 
 
     viewsCount: '47', 
 
     clicksCount: '20' 
 
     }, 
 
     { 
 
     title : 'MNO', 
 
     imgSrc: '../../images/product1.png', 
 
     viewsCount: '62', 
 
     clicksCount: '22' 
 
     } 
 
    ]; 
 
    
 
angular.forEach(vm.products, function (detail) { 
 
    detail.viewsCount = parseFloat(detail.viewsCount); 
 
}); 
 
    });

<link rel="stylesheet" href="//rawgit.com/angular/bower-material/master/angular-material.css" /> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.15/angular.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.15/angular-animate.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.15/angular-aria.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.14/angular-ui-router.js"></script> 
 
<script src="//rawgit.com/angular/bower-material/master/angular-material.js"></script> 
 
<body ng-app ="mainApp" ng-controller="productsController as vm"> 
 
<md-list> 
 
\t <md-list-item layout="row" layout-align="space-between center" \t ng-repeat="product in vm.products | orderBy:'viewsCount'" 
 
    ng-click="vm.latestSelectedIndex = $index; vm.selectProduct(product)" 
 
\t \t ng-show="!$first"> 
 
\t \t <div flex="80"> 
 
\t \t \t <h3 class="product-title">{{product.title}}</h3> 
 
\t \t </div> 
 
\t \t <div class="product-views" flex="20"> 
 
\t \t \t <div class="count">{{product.viewsCount}}</div> 
 
\t \t \t <div class="count-label"> Views </div> 
 
\t \t </div> 
 
\t </md-list-item> 
 
</md-list> 
 
</body>

Quelle

2017-12-24 10:25:16 Sajeetharan

Auf diese Weise auch versucht. Aber es funktioniert nicht –

Überprüfen Sie die Demo! d. h., weil Ihr viewCount eine Zeichenfolge ist und Sie eine Flot/Nummer analysieren müssen – Sajeetharan

hat es geholfen, Ihr Problem zu lösen – Sajeetharan

Filterung funktioniert nicht auf Array von Objekten in AngularJS

Antwort

Verwandte Themen