0

I'm currently working on my first AngularJS project so I have no Angular experience at all. In my html, I show a slidebar with two handle. This way I can get a minimum and a maximum value. This happens here:

  <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>

I have a small set of data in my controller:

 $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}
];

As you guys can see every product has a width. I only want the show those products with a width between the minimum and maximum value selected on the sliderbar. Any suggestions?

2 Answers 2

2

You can use Angular filters for that. A filter can be a string, Object, or function()

A solution is to include a filter while rendering the list.

<ul>
  <li ng-repeat="product in products | filter : filterByWidth"
    {{product.partNumber}} - {{product.width}}
  </li>
</ul>

Then in your controller, you can include a filter function (for this example it's filterByWidth).

$scope.filterByWidth = function(product, index, array) {
  if (product.width > $scope.minWidth &&
    product.width < $scope.maxWidth) {
    return true;
  } 
}
1
  • 1
    Thanks man! This totally worked! A bit strange I didn't came up with this myself. Simple solution actually, thanks! Commented Mar 4, 2016 at 10:29
0

You can do something like this

     <div ng-repeat="product in products">
       <div ng-if="product.width > minWidth && product.width < maxWidth ">  {{product.partNumber}}</div>
     </div>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.