使用 orderBy 的 Angularjs 排序对我不起作用答案

【问题标题】：Angularjs sorting using orderBy is not working for me使用 orderBy 的 Angularjs 排序对我不起作用
【发布时间】：2015-02-14 20:11:04
【问题描述】：

我正在尝试根据收视率、定价和总数对我的家庭清单进行排序。不幸的是，我不适合我，我是 angularjs 的新手。在这里，我有我的 html 代码。实际上它是对事物进行排序，但不是按顺序排列。 ->当用户点击价格 btn 时，他应该先以最高价格回家，然后再降低，最低等（5000,4000,3000）如果他再次点击，那么订单必须是（3000,4000,5000）。总计数和评分类似。我还创建了 plunker 来编辑您的建议。请编辑并向我提供工作链接。这里是demoForEdit。

//html code
<body ng-controller="MainCtrl as ctrl">
    <div class="col-md-offset-2">
      <button ng-click="orderByPopularity='total_counts'; reverseSort = !reverseSort" class="btn btn-sm btn-info">sort on total counts </button>
      <button  ng-click="orderByPopularity='price'; reverseSort = !reverseSort" class="btn btn-sm btn-danger">sort on Price</button>    
      <button  ng-click="orderByPopularity='avg'; reverseSort = !reverseSort" class="btn btn-sm btn-success">sort on ratings</button>    
    </div>
  <br>
<div ng-repeat="home in homes | orderBy:orderByPopularity:reverseSort">
  <div class="panel panel-primary  ">
    <div class="panel-heading">
      Home name: {{home.home_name}}
    </div>
      <div class="panel-body">
        <div class="panel panel-body">
          <table>
          <p>total counts:{{home.total_counts}}</p>
          <p>city:{{home.city}}</p>
          <p>Price:{{home.price}}</p>
          <div ng-repeat="rate in rating">
          <!--  looping inside ng-repeat rating is seprate data but has home id-->
            <div ng-if="rate.home_id==home.id">
            Home raintgs:{{rate.avg}}  
          </div>
        </div>
      </div>
    </div>
  </div>  
</div>

//My app.js code
var app = angular.module('plunker', []);
    app.controller('MainCtrl', function($scope) {
      $scope.homes=[{"id":"48","home_name":"Swastik","city":"Banglore","zipcode":"888888","total_counts":"1","price":"5000"},
    {"id":"49","home_name":"Khushboo","city":"Chennai","zipcode":"456786","total_counts":"17","price":"3333"},
    {"id":"50","home_name":"Raj","city":"Hydrabad","zipcode":"123455","total_counts":"2","price":"20000"}];
    $scope.orderByPopularity ='total_counts';
    $scope.reverseSort = true;
    $scope.rating=[{"home_id":"48","avg":"3.5"},
    {"home_id":"49","avg":"2"},
    {"home_id":"50","avg":"4"}
    ];
    });

【问题讨论】：

标签： javascript angularjs sorting angularjs-ng-repeat angular-ui

【解决方案1】：

它确实排序，但是您的 total_counts 值是字符串，因此它按字典顺序对它们进行排序。如果您想按数字订购，我假设您这样做，您需要删除引号并将它们的值作为数字本身，即："total_counts":17 等。

编辑：经过修改，您可以将值保留为字符串（在自定义排序函数内）。

至于avg 评级排序，你不能这样做，因为你的排序是在$scope.homes 上，并且这个数组的对象没有avg 属性，这是你的另一个数组的属性 - @ 987654327@。要按该属性排序，您必须创建自己的自定义函数。

$scope.myValueFunction = function(o) {

   if ($scope.orderByPopularity == "avg") {
     var obj;
     for (var i = 0; i < $scope.rating.length; i++) { 
        if ($scope.rating[i].home_id == o.id) {
          obj = $scope.rating[i]
        }
     }
     return obj.avg;
   }
   else  {
     return parseInt(o[$scope.orderByPopularity]); 
   }

};

在 HTML 中：

<div ng-repeat="home in homes | orderBy:myValueFunction:reverseSort">

看看这个Plunker作为演示。

【讨论】：

那是 JSON 数据，我也不想修改它的键值对，这就是 IO 提出这个问题的原因。感谢您的回复。
@arunaangadi 我修改了函数以使用您的原始 JSON 数据。 Plunker 也更新了。
我看不到价格排序先生？它应该排序 3333 5000 然后 20000 或 20000 , 5000 然后 3333
顺便为自定义过滤器投票，先生，请解决这两个问题，我会标记你是正确的。请
@arunaangadi 正确，价格就像 total_counts，也应该使用 parseInt()。查看更新的答案/plunker。