Question

我有一个下拉列表，其中包含价格范围的选项（根据我的模型中的汽车价格动态生成）。在选择价格范围时，让我们说“3000到4000”，我希望出现属于这些价格范围的汽车。

这是我的更改事件监听器功能控制器：

$('#priceRange').change(function(){
    $scope.init(); //init updates cars[] with all the 20 objects
    var min, max;
    var index = $('#priceRange :selected').index();
    /*algo to find min and max range*/
    if(index == 0){
        min = $scope.minRange;
        max = $scope.maxRange;
    }else{
        min = (index-1)*1000;
        if(index*1000 == $scope.maxRange){
            max = index*1000;
        }else{
            max = index*1000-1;
        }
    }
    //For 3000 to 4000, I am passing min = 3000, max = 4000 and all the cars which then priceFilter function updates $scope.cars with cars belonging to that range

    $scope.cars = $scope.priceFilter($scope.cars, min, max);
});

$scope.priceFilter = function(items, min, max) {
    var filtered = [];
    angular.forEach(items, function(item, key) {
      if(item.price <= max && item.price >= min){
            filtered.push(item);
      }
    });
    return filtered;
};

但是这些更新的$ scope.cars并没有像我期望的那样反映在我的视图中。这是标记：

 <label>Make: </label> <input ng-model="search.make">
 <select id="priceRange"><option>All</option></select> 
<div class="col-md-3" ng-repeat="car in cars | filter:search">
    <img class="carImg" src="{{car.imgPath}}" alt="{{car.make}}">
    <div class="col-sm-8">
       <h4>{{car.make}} {{car.model}}</h4>
        <h4>{{car.year}}, {{car.price | currency}}</h4>
    </div>
</div>

Answer 1

由于更改是通过jQuery处理的，因此Angular没有它的概念，除非你通过调用$scope.cars = $scope.priceFilter($scope.cars, min, max); $scope.$apply();明确唤醒Angular：

{{1}}

另见我的小提琴：http://jsfiddle.net/masa671/hs9vu0r2/

我同意@dfsq，使用Angular，jQuery通常不是处理此类功能的最佳方式。

通过Angular中的下拉列表进行过滤

1 个答案: