javascript - 过滤不适用于 AngularJS 中的对象数组-6ren

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

转载作者：行者123 更新时间：2023-11-28 03:51:31

我有产品列表作为对象数组。想要根据最高观看次数显示该内容。我尝试使用“orderBy”服务。但它没有从我附加的对象数组中过滤。关于如何做到这一点有什么建议吗？

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

最佳答案

您不必提及产品，只需使用 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);
});

演示

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