I am diving into my very first AngularJS project and I must admit, I have zero experience with Angular. On my HTML page, I have implemented a slider bar with two handles to set a minimum and maximum value. Here is the snippet of code where this functionality exists:
<div data-role="rangeslider">
<label for="width-min">Width</label>
<input type="range" name="width-min" id="width-min" value="5" ng-value="5" min="3" max="53.5" ng-model="minWidth">
<label for="width-max">Width</label>
<input type="range" name="width-max" id="widthe-max" value="35" ng-value ="53" min="3" max="53.5" ng-model="maxWidth">
</div>
In my controller, I have a small dataset which includes various product details:
$scope.products = [
{partNumber: "5400-003-412", specific:"V",width:5.5,MT:0.25,CT:0.33,L:18},
{partNumber: "5400-003-410", specific:"DC",width:5.5,MT:0.25,CT:0.33,L:11.5},
{partNumber: "5400-003-102s3", specific:"V",width:19.5,MT:0.38,CT:0.61,L:25.4}
];
Each product in the list has a width property. My aim is to display only those products whose width falls within the range set by the minimum and maximum values selected on the slider bar. Any tips or suggestions on how to achieve this?