在值之间计算过滤的项目

时间:2017-05-24 08:31:18

标签: angularjs

我正在显示列表的酒店。如果选中过滤器复选框,则结果列表会根据选择条件进行更改。

我的控制器数据如下所示:

$scope.hotels= [
{
  id: 1,
  name: 'HOTELONE',
  fname: 'Tony',
  lname: 'Stark',
  location: 'Stark Tower',
  rate: '250.00'
},
{
  id: 2,
  name: 'HOTELTWO',
  fname: 'Bruce',
  lname: 'Wayne',
  location: 'Bat Cave',
  rate: '500.00'
},];

$scope.getPriceRange = function (pricefrom,priceto) {
    return filterFilter($scope.hotels, { rate: pricefrom && priceto}).length;
}

查看

<div class="pull-right">
   <p class="ng-binding">[{{getPriceRange("100","300")}}]</p>
</div>

如何在价格值之间过滤酒店?

3 个答案:

答案 0 :(得分:2)

不是将对象传递给filterFilter,而是传递函数,检查速率是否在范围内:

return filterFilter($scope.hotels, function(hotel){
   // calculation
   return hotel.rate >= pricefrom && hotel.rate <= priceto
}).length;

答案 1 :(得分:1)

试试这个:

&#13;
&#13;
var myApp = angular.module('myApp',[]);

myApp.controller('MyCtrl', function($scope) {

$scope.hotels= [
  {
    id: 1,
    name: 'HOTELONE',
    fname: 'Tony',
    lname: 'Stark',
    location: 'Stark Tower',
    rate: '250.00'
  },
  {
    id: 2,
    name: 'HOTELTWO',
    fname: 'Bruce',
    lname: 'Wayne',
    location: 'Bat Cave',
    rate: '500.00'
}];

$scope.copyObj = JSON.parse(JSON.stringify($scope.hotels));

$scope.getPriceRange = function(startPrice, endPrice) {
  $scope.hotels = $scope.copyObj.filter(item => { return item.rate >= startPrice && item.rate <= endPrice });
}

});
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="MyCtrl">
  <input type="checkbox" name="range" ng-model="priceRange" ng-change="getPriceRange(100,300)"/>100-300<br>
  <input type="checkbox" name="range" ng-model="priceRange1" ng-change="getPriceRange(400,800)"/>400-800<hr>
  <div ng-repeat="item in hotels">
    <p>{{item.name}}</p>
    <p>{{item.rate}}</p>
  </div>
</div>
&#13;
&#13;
&#13;

答案 2 :(得分:-1)

&#13;
&#13;
app.filter('myFormat', function() {
    return function(x) {
        var i,count=0,
while(i>200 && i<500){
count++
}
return count;
        
});
&#13;
try to render a numbers  array which should contain all numbers 

  <li ng-repeat="x in numbers">
        {{x | myFormat}}
    </li>
&#13;
&#13;
&#13;