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

Question

So I have this array of items that are displayed with ng-repeat.

The items have a filter applied based on the ng-model of some input boxes.

Each item has a price attribute that is a number.

I want to be able to type the price in the input box and then get back all the items that are <= the price.

If it could be done as a custom filter that would be great but it needs to link the input box ng-model to the filter on the ng-repeat and bring back the items that are less than or equal to it.

It's kind of tricky I know but if anyone could help I would be vary grateful.

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

Answer 2

I think something like this would work.

          <input type="text" ng-model="somevalue"/>
          <div ng-repeat="item in myitems | filter:myfilter(item)"></div>


          $scope.somevalue;
          $scope.myfilter = function(item) {
            return function(theItem) {
              // Return true or false base on the item and $scope.somevalue

            };
          };