Angular Range Filter
How do I make an angular range filter?
Very simple min/max range filter. What is a angular range filter? How do you make a angular range filter? This script and codes were developed by Jakob-e on 04 July 2022, Monday.
Angular Range Filter - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Angular Range Filter</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div data-ng-app="App" data-ng-controller="AppCtrl"> <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/68939/angular-logo.png" /> <h1>Angular Range Filter</h1> <p>Nothing fancy :-)</p> <hr> <label>Min:{{ ui.min | currency }} <input type="range" min="0" max="1000" numeric data-ng-model="ui.min" > </label> <hr> <label>Max: {{ ui.max | currency }} <input type="range" min="0" max="1000" numeric data-ng-model="ui.max"> </label> <div data-ng-if="ui.min>ui.max"> <p>Min > Max makes little sense – sorry this is not about great UI/UX/BuzzBuzz ;-)</p> </div> <hr> <table> <caption>Products within price range</caption> <thead> <tr> <th scope="col" data-ng-class="{'acc':(ui.sort=='name'), 'dec':(ui.sort=='-name')}" data-ng-click="ui.sort = ui.sort=='name'?'-name':'name'">Name</th> <th scope="col" data-ng-class="{'acc':(ui.sort=='price'), 'dec':(ui.sort=='-price')}" data-ng-click="ui.sort = ui.sort=='price'?'-price':'price'">Price</th> </tr> </thead> <tr data-ng-repeat="product in model.products | rangeFilter:'price':ui.min:ui.max | orderBy:ui.sort "> <td>{{ ::product.name }}</td> <td>{{ ::product.price | currency }}</td> </tr> </table> <pre>model.products = {{ model.products | json}}</pre>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.14/angular.min.js'></script> <script src="js/index.js"></script>
</body>
</html>
Angular Range Filter - Script Codes CSS Codes
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, td { font: 300 16px sans-serif;
}
th { font: 700 16px sans-serif; cursor: pointer;
}
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;
}
.acc:after { content: ' \25B2'; color: #777; font-size: 8px; position: absolute; margin: 3px 8px;
}
.dec:after { content: ' \25BC'; color: #777; font-size: 8px; position: absolute; margin: 3px 8px;
}
Angular Range Filter - Script Codes JS Codes
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, sort: 'name' }; // Replaced by directive below // $scope.$watch('ui.min',function(nVal,oVal){ // $scope.ui.min = parseInt(nVal); // }) // $scope.$watch('ui.max',function(nVal,oVal){ // $scope.ui.max = parseInt(nVal); // }) } ]) // directive to parse input as float (not string) .directive('input', function() { return { restrict: 'E', require: '?ngModel', link: function(scope, element, attrs, ngModel) { if('numeric' in attrs) { ngModel.$parsers.push(parseFloat); } } }; });
Developer | Jakob-e |
Username | jakob-e |
Uploaded | July 04, 2022 |
Rating | 4 |
Size | 3,968 Kb |
Views | 42,504 |
Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!
Name | Size |
The 100 | 5,082 Kb |
SVG Encoding | 3,280 Kb |
Slide to Navigation | 3,063 Kb |
Angular Tab Menu | 5,052 Kb |
Responsive break out of parent element | 6,593 Kb |
Baseline, Scale and Element Queries | 8,635 Kb |
SVG Path Circle | 2,166 Kb |
Placeholder Services | 4,197 Kb |
Navigation highlighting using waypoints.js | 6,689 Kb |
Snap to base-line | 4,943 Kb |
Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!
Name | Username | Size |
Greyscale image with filter in CSS3 | NickyCDK | 1,562 Kb |
Michelle, submit your photography to Unsplash. | Zaneriley | 3,368 Kb |
A Pen by Jason Kinney | Jason-kinney | 1,980 Kb |
JQuery AJAX reddit Exercise | Btholt | 1,777 Kb |
OnScreenAction | Ozgursagiroglu | 2,647 Kb |
Slider css only | Armandobau | 2,161 Kb |
Gradient-ui-button-mark-fx | Tabspace | 1,881 Kb |
A Pen by Bryan Rojas | Bryanrojas | 1,873 Kb |
Custom Select Element | Agrayson | 3,616 Kb |
Pure CSS Tooltip | APinix | 2,815 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!