Отображать только товары стоимостью менее 10 фунтов стерлингов с помощью Angular Filter

У меня есть список продуктов, созданный из стороннего канала JSON, цены будут варьироваться в зависимости от текущей цены от стороннего поставщика.

Как я могу отображать цены на странице ниже только для определенного значения, например ниже 10,00 фунтов стерлингов?

Я предполагаю, что здесь будут задействованы фильтры AngularJS, но теперь я уверен, как это работает с таким выражением, как item.products_price, но еще лучше, если ползунок или что-то еще также возможен. Таким образом, продукты отображаются ниже в зависимости от диапазона значений в ползунке.

Вот мой код «Список»:

    <!DOCTYPE html>
    <html ng-app="plunker">

    <head>
        <meta charset="utf-8" />
        <title>AngularJS Plunker</title>
        <script>
            document.write('<base href="' + document.location + '" />');
        </script>
        <link rel="stylesheet" href="style.css" />
        <script data-require="[email protected]" src="https://code.angularjs.org/1.4.9/angular.js" data-semver="1.4.9"></script>
        <script src="app.js"></script>
    </head>

    <ion-content class="has-subheader">
        <ion-list>
            <ion-item ng-repeat="item in products | filter:query" class="item-thumbnail-left item-text-wrap">
                <img ng-src="img/{{item.products_image}}" alt="{{item.products_name}} Photo">
                <h2>{{item.products_name}}</h2>
                <h3>{{item.products_model}}</h3>
                <p>{{item.products_price}}</p>
            </ion-item>
        </ion-list>
    </ion-content>

    </html>

http://plnkr.co/edit/lV5GUPkU9EWUiedHuA1l


javascript angularjs angularjs-ng-repeat angular-filters
person me9867    schedule 28.06.2016    source источник
comment
Угловой фильтр — это код, используемый для форматирования объекта как текста. Пример: есть фильтры даты, которые могут форматировать объект даты различными способами, чтобы они отображались на экране определенным образом. Это не имеет ничего общего с фильтрацией значений. Вы должны создать метод в своем угловом контроллере, который извлекает подмножество вашего массива на основе некоторого ввода, например суммы. Затем вы можете вызвать это в своем атрибуте ng-repeat. Пример: ng-repeat="item in getProductsBelow(10)" и создайте функцию с тем же именем, которая возвращает те продукты, которые находятся ниже входных данных.   -  person Igor    schedule 28.06.2016
comment
Я думаю, что ответ на этот вопрос должен вам помочь: stackoverflow. com/questions/23728666/   -  person Jens Eeckhout    schedule 28.06.2016
comment
@Igor Это не совсем так. Вы можете создать пользовательский .filter() в Angular, который принимает входные данные для выполнения фильтрации в списке, возвращающем массив, содержащий только те элементы, которые соответствуют вашим критериям фильтра. Это более выгодно, чем написание метода контроллера, потому что вы можете повторно использовать этот фильтр во всем приложении без необходимости писать код в куче разных контроллеров.   -  person Lex    schedule 28.06.2016
comment
@Lex, спасибо, приятно знать.   -  person Igor    schedule 28.06.2016

Ответы (2)


arrow_upward
0
arrow_downward

То, что вы хотите сделать, это написать собственный фильтр. Вот один из способов структурирования фильтра:

.filter('valueRange', function() {
    return function(productList, minValue, maxValue) {
        // make sure something was passed - you can decide if you want to use defaults
        if(!productList || !minValue || !maxValue) {
            return productList;
        }

        var out = [];
        angular.forEach(productList, function(product) {
            if(product.products_price >= minValue && product.products_price <= maxValue) {
                out.push(product);
            }
        });
        return out;
    }
});

Затем вы можете использовать его в своем ng-repeat как:

<ion-item ng-repeat="item in products | valueRange:minValue:maxValue" class="item-thumbnail-left item-text-wrap">

Эта часть — valueRange:minValue:maxValue — будет вызывать фильтр valueRange, передавать products в качестве первого параметра, minValue в качестве второго параметра и maxValue в качестве третьего параметра. Вы можете получить эти значения из вашего ползунка.

person Lex    schedule 28.06.2016

arrow_upward
0
arrow_downward

почему бы тебе не попробовать

ng-if="item.products_price<10"

or 

ng-show="item.products_price<10"
person Sa E Chowdary    schedule 28.06.2016