使用orderBy的Angularjs排序對我不起作用

Question

我正在嘗試根據評分，價格和總數對我的房屋清單進行排序。 不幸的是對我不起作用，我是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"}
    ];
    });

Answer 1

它確實排序，但是total_counts值是字符串，因此按字典順序對其進行排序。 如果您想按數字順序（我假設您要這樣做），則需要刪除引號，並將其值作為數字本身，即： "total_counts":17等。

編輯：已修改，因此您可以將值保留為字符串（在自定義排序功能內）。

至於avg評級排序，您無法執行此操作，因為您的排序位於$scope.homes ，並且此數組的對象沒有avg屬性，該屬性是另一個數組的屬性- $scope.ratings 。 要按該屬性排序，您必須創建自己的自定義函數。

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

查看此柱塞作為演示。

使用orderBy的Angularjs排序對我不起作用

問題描述

1 個解決方案

解決方案1
1 已采納 2015-02-14 11:22:40

使用orderBy的Angularjs排序對我不起作用

問題描述

1 個解決方案

解決方案1 1 已采納 2015-02-14 11:22:40

解決方案1
1 已采納 2015-02-14 11:22:40