Question

我正在尝试按星级评分过滤结果，这些过滤器是复选框。我不能让这个工作。我一直收到错误：

Error: input is undefined

到目前为止，这是我的代码：

$scope.ratings = [
    { name:'One Star', value:1, selected: true}, 
    { name:'Two Stars', value:2, selected: true},
    { name:'Three Stars', value:3, selected: true},
    { name:'Four Stars', value:4, selected: true},
    { name:'Five Stars', value:5, selected: true}
 ]



.filter('ratingsFilter', function(){
    return function(vehicleResults, ratings){
        console.log(ratings)
    }
 })


<label ng-repeat="rating in ratings">
    <input name="rating" type="checkbox" value="{{rating.value}}" ng-model="rating"> star rating {{rating.value}}
</label>

显示过滤结果时：

<div ng-repeat="vehicle in (filteredResults = (vehicleResults | filter: priceFilter | ratingsFilter:rating )) | startFrom:(currentPage - 1)*10 | limitTo:10 " class="results-container">

有人可以给我一些关于如何过滤这些结果的指示吗？

提前谢谢。

Answer 1

我认为您的问题在于评级转发器，而不在您的过滤器上。

当您使用ng-model指令时，它会处理值绑定，您不能在输入元素上同时使用插值值属性和ng-model。

我相信如果你完全删除ng-model而不是像这样使用ng-checked指令，那么你最想要实现的是：

var app = angular.module('main', []);

app
  .filter('ratingsFilter', function() {
     return function(items, includedRatings) {
        return items.filter(function (value, index, array) {
            return includedRatings.indexOf(value.rating) > -1;
        });
     };
  })
  .controller('MainCtrl', function($scope) {
  $scope.selectedRatings = [1, 2, 3, 4, 5];
  $scope.toggleRating = function (val) {
      var array = $scope.selectedRatings;
      var isChecked = array.indexOf(val);
      if (isChecked > -1) {
          for (var i = array.length; i--;) {
              if (array[i] === val) {
                  array.splice(i, 1);
              }
          }
      }
      else {
          array.push(val);
      }
  };
   $scope.ratings = [
    { name:'One Star', value:1, selected: true}, 
    { name:'Two Stars', value:2, selected: true},
    { name:'Three Stars', value:3, selected: true},
    { name:'Four Stars', value:4, selected: true},
    { name:'Five Stars', value:5, selected: true}
  ];
  $scope.priceFilter = {};
  $scope.vehicleResults = [
    { name:'Porche', rating: 3, price:80000}, 
    { name:'Ferrari', rating: 1, price:150000},
    { name:'Volvo', rating: 2, price:54000},
    { name:'Batmobile', rating: 5, price:10},
  ];
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="main" ng-controller="MainCtrl">
    <label ng-repeat="rating in ratings">
    <input name="rating" type="checkbox" 
           value="{{rating.value}}" 
           ng-click="$parent.toggleRating(rating.value)" 
           ng-checked="$parent.selectedRatings.indexOf(rating.value) > -1" /> 
    star rating {{rating.value}}
    </label> 
    <br />
    <label>
      Price:
      <input ng-model="priceFilter['price']" />
    </label>
    <label>
      selected Rating:
      {{ selectedRatings }}
    </label>
    <ul > 
      <li ng-repeat="vehicle in vehicleResults | filter : priceFilter | ratingsFilter: selectedRatings">
        {{vehicle.name}} - {{vehicle.price | currency}} ({{vehicle.rating}} stars)
      </li>
    </ul>
</div>

Answer 2

我已经创建了plunk，但它正在玩弄我，所以这里有代码

http://codepen.io/maurycyg/pen/RNrxQj

JS

var app = angular.module('ratings', []);

app.controller('MainCtrl', function($scope) {
  $scope.ratings = [{
    name: 'One Star',
    value: 1,
    selected: true
  }, {
    name: 'Two Stars',
    value: 2,
    selected: true
  }, {
    name: 'Three Stars',
    value: 3,
    selected: true
  }, {
    name: 'Four Stars',
    value: 4,
    selected: true
  }, {
    name: 'Five Stars',
    value: 5,
    selected: true
  }]

  $scope.vehicles = [{
    name: 'One',
    rating: 1
  }, {
    name: 'Two',
    rating: 2
  }, {
    name: 'Three',
    rating: 3
  }, {
    name: 'Four',
    rating: 4
  }, {
    name: 'Five',
    rating: 5
  }, ]






}).filter('ratingsFilter', function() {
  return function(vehicles, ratings) {
    filteredResults = []
    angular.forEach(vehicles, function(vehicle) {
      angular.forEach(ratings, function(rating) {
        if (vehicle.rating === rating.value && rating.selected === true) {
          filteredResults.push(vehicle)
        }
      })
    })
    return filteredResults;
  }
})

如何按复选框筛选结果？

2 个答案:

JS