Question

我有产品列表作为对象数组。想要根据最高观看次数显示。我尝试使用＆＃34; orderBy＆＃34;服务。但它并没有从我附加的对象数组中过滤掉。有关如何做到这一点的任何建议吗？

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

您不必提及产品，只需使用fieldName

即可

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

修改

此属性 viewsCount 是一个字符串，您需要将其解析为数字/浮点值，如下所示。

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

<强>样本

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

过滤不适用于AngularJS中的对象数组

1 个答案: