Angularjs 通过角模式中的下拉列表进行过滤

我有一个下拉列表，可以选择价格范围（根据车型中的汽车价格动态生成）。在选择价格范围时，比如说“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;
};

$（'#priceRange'）。更改（函数（）{
$scope.init（）；//init使用所有20个对象更新cars[]
最小值，最大值；
var index=$（'#priceRange:selected'）。index（）；
/*查找最小和最大范围的算法*/
如果（索引==0）{
min=$scope.minRange；
max=$scope.maxRange；
}否则{
最小值=（指数-1）*1000；
如果（索引*1000=$scope.maxRange）{
最大值=指数*1000；
}否则{
最大值=指数*1000-1；
}
}
//对于3000到4000，我将通过min=3000，max=4000和所有车辆，然后priceFilter功能将$scope.cars更新为该范围内的车辆
$scope.cars=$scope.priceFilter（$scope.cars，最小值，最大值）；
});
$scope.priceFilter=函数（项目、最小值、最大值）{
var筛选=[]；
angular.forEach（项目、功能（项目、键）{
如果（item.price=min）{
过滤、推送（项目）；
}
});
返回过滤；
};

但是这些更新的$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>

Make:
全部的
{{car.make}{{car.model}
{{car.year}，{{car.price | currency}

由于更改是通过jQuery处理的，Angular对此没有概念，除非您通过调用

$apply（）

显式唤醒Angular：

另见我的小提琴：

---

我同意@dfsq的观点，即对于Angular，jQuery通常不是处理此类功能的最佳方式。

这里有一个很好的建议：如果您真的想了解Angular，请从项目中删除jQuery。这样你就不会落入jQuery编码应用程序的陷阱。谢谢@masa，这已经成功了。下次将遵循dfsq的建议。：）

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