javascript - Angular js 创建一个自定义过滤器，返回小于动态数字的所有项目

Question

所以我有这个用 ng-repeat 显示的项目数组。

这些项目应用了基于某些输入框的 ng-model 的过滤器。

每个商品都有一个价格属性，该属性是一个数字。

我希望能够在输入框中输入价格，然后返回所有 <= 价格的商品。

如果它可以作为自定义过滤器来完成，那就太好了，但它需要将输入框 ng-model 链接到 ng-repeat 上的过滤器，并返回小于或等于它的项目。

我知道这有点棘手，但如果有人可以提供帮助，我将不胜感激。

Answer 1

HTML

<div ng-app="app" ng-controller="ctrl">
    Max price: <input type="text" ng-model="maxPrice">
    <ul ng-repeat="e in items | cheaperThan:maxPrice">
        <li>Item name: {{e.name}}, price: {{e.price}}$</li>
    </ul>
</div>

JavaScript

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

app.controller('ctrl', function($scope){
    $scope.maxPrice = 100;
    $scope.items = [
        {name: 'Item 1', price: 123},
        {name: 'Item 2', price: 110},
        {name: 'Item 3', price: 90},
        {name: 'Item 4', price: 80}
    ];
});

app.filter('cheaperThan', function(){
    return function(ar, maxPrice){
        console.log(ar);
        return ar.filter(function(e){
            return e.price <= maxPrice;
        });
    };
});

JSFiddle