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

【问题标题】：Filtering is not working on Array of objects in AngularJS过滤不适用于AngularJS中的对象数组
【发布时间】：2018-06-06 04:27:20
【问题描述】：

我将产品列表作为对象数组。希望根据最高观看次数显示。我尝试使用“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>

【问题讨论】：

这可能是因为 viewCount 值是字符串，所以可以说是按字母排序，而不是按数字排序
我把它转换成了数字。现在它正在工作。谢谢...

标签： javascript angularjs sorting

【解决方案1】：

您不必提及产品，只需使用字段名称即可

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

【讨论】：

查看演示！即因为您的 viewCount 是一个字符串，您需要解析为浮点数/数字
它工作正常。但是有没有办法从对象的第二个索引开始过滤？这将非常有帮助......
只需从数组中删除第一个对象并在控制器上应用过滤器。标记答案是否有帮助
我不想丢失数据。有没有其他方法可以在不实际删除它的情况下做到这一点？
在这种情况下，您需要自定义 orderby 过滤器stackoverflow.com/questions/26572508/…