基于AngularJS实现的价格范围过滤器

Angular Range Filter

angular，filter

《three.js使用多个渐变torus模拟光环光晕》申请公开！

第三方库
作品简介 2277
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

angular.module('App', [
    'app.controller.app',
    'app.filter.range'
]);

angular.module('app.filter.range', [])
    .filter('rangeFilter', function() {
        return function(items, attr, min, max) {
            var range = [],
                min = parseFloat(min),
                max = parseFloat(max);
            for (var i = 0, l = items.length; i < l; ++i) {
                var item = items[i];
                if (item[attr] <= max && item[attr] >= min) {
                    range.push(item);
                }
            }
            return range;
        };
    });

angular.module('app.controller.app', [])
    .controller('AppCtrl', [
        '$scope',
        function($scope) {

$scope.model = {}
            $scope.model.products = [{
                name: 'A',
                price: 100
            }, {
                name: 'B',
                price: 500
            }, {
                name: 'C',
                price: 120
            }, {
                name: 'D',
                price: 100
            }, {
                name: 'E',
                price: 1.99
            }, {
                name: 'F',
                price: 710
            }, {
                name: 'G',
                price: 123
            }, {
                name: 'H',
                price: 630
            }, {
                name: 'I',
                price: 458
            }, {
                name: 'J',
                price: 820
            }];

$scope.ui = {
                min: 0,
                max: 250
            };

$scope.$watch('ui.min', function(nVal, oVal) {
                $scope.ui.min = parseInt(nVal);
            })

$scope.$watch('ui.max', function(nVal, oVal) {
                $scope.ui.max = parseInt(nVal);
            })
        }
    ])

编译

CSS

html {
    box-sizing: border-box;
}
*,
*:before,
*:after {
    box-sizing: inherit;
}
* {
    margin: 0;
    padding: 0;
}
body {
    padding: 50px;
}
img {
    max-width: 150px;
    float: left;
    margin-top: -50px;
}
h1 {
    display: block;
    float: left;
    width: calc(100% - 150px);
    font: 300 36px/1.2 sans-serif;
}
h1 + p {
    display: block;
    float: left;
}
caption {
    font: 700 18px sans-serif;
}
p,
label,
th,
td {
    font: 300 16px sans-serif;
}
label {
    display: block;
}
input {
    float: right;
    width: calc(100% - 120px);
}
.valid {
    background: olive;
}
table {
    width: 49%;
    float: left;
    border-collapse: collapse;
    border: 1px solid #ccc;
}
caption {
    border: 1px solid #ccc;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    border-bottom: 0;
    padding: 10px;
}
th {
    background: whitesmoke;
    padding: 10px;
    text-align: left;
}
td {
    background: #fafafa;
    padding: 10px;
}
tr {
    border: 1px solid #ccc;
}
pre {
    width: 49%;
    float: right;
    background: whitesmoke;
    border-radius: 5px;
    border: 1px solid #ccc;
    padding: 10px;
}
hr {
    margin: 10px 0;
    clear: both;
}
[data-ng-if] {
    clear: both;
    margin: 30px 0;
    float: left;
    background: #e0353d;
    padding: 20px;
    width: 100%;
}
[data-ng-if] > p {
    display: block;
    width: 100%;
    text-align: center;
}

HTML

<hr>
    <label>Min:{{ ui.min | currency }}
        <input type="range" data-ng-model="ui.min" min="0" max="1000">
    </label>
    <hr>
    <label>Max: {{ ui.max | currency }}
        <input type="range" data-ng-model="ui.max" min="0" max="1000">
    </label>
    <div data-ng-if="ui.min>ui.max">
        <p>Min > Max makes no sense</p>
    </div>

<hr>
    <table>
        <caption>Products within price range</caption>
        <thead>
            <tr>
                <th scope="col">Name</th>
                <th scope="col">Price</th>
            </tr>
        </thead>
        <tr data-ng-repeat="product in model.products | rangeFilter:'price':ui.min:ui.max">
            <td>{{ ::product.name }}</td>
            <td>{{ ::product.price | currency }}</td>
        </tr>
    </table>
    <pre>model.products = {{ model.products | json}}</pre>

</div>

Angular Range Filter

angular，filter

编辑器支持Emmet

快捷键

Angular Range Filter

angular，filter

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：