Test Filtering AngularJS

by gtempesta

HTML

<div ng-app ng-controller="MainController">
    <div class="form-group col-lg-10">
    <label class="label label-default" style="margin-left:10px">Search</label>
    <input ng-model="searchText" class="form-control" />
  </div>

  <div class="form-group col-lg-10">
    <label class="label label-default" style="margin-left:10px">Min Price</label>
    <input ng-model="minPrice" class="form-control" />
  </div>

  <div class="form-group col-lg-10">
    <label class="label label-default" style="margin-left:10px">Max Price</label>
    <input ng-model="maxPrice" class="form-control" />
  </div>

  <div class="form-group col-lg-10">
    <label class="label label-default" style="margin-left:10px">Description</label>
    <input ng-model="searchDescription" class="form-control" />
  </div>


  <table class="table">
    <tbody>
      <tr>
        <th>Name</th>
        <th>Price</th>
        <th>Quantity</th>
      </tr>
      <tr ng-repeat="p in products | filter:{name: searchText, description:searchDescription} | filter:minPriceFilter | filter:maxPriceFilter">
        <td>{{p.name}}</td>
        <td>{{p.price}}</td>
        <td>{{p.description}}</td>
      </tr>
    </tbody>
  </table>
</div>

CSS

label{
  margin-left:10px;
}

JavaScript

function MainController($scope) {

$scope.products = [{ name : 'sony', price : 23, description : 'location fantastica'},
      { name : 'nokia', price : 45.3, description : 'le pietanze servite sono buone'},
      { name : 'sumsang', price : 65, description : 'diamo al cliente la massima priorità'},
      { name : 'motorola', price : 12.7, description : 'carne di massima qualità'},
      { name : 'micromax', price : 39.75, description : 'personale altamente qualificato'},
      { name : 'lenovo', price : 10, description : 'grande empatia'}];
    
   $scope.minPriceFilter = function (product) {
    var filtered = product;
    if ($scope.minPrice > 0) {
      filtered = product.price >= $scope.minPrice;
    }
    return filtered;
  }

  $scope.maxPriceFilter = function (product) {
    var filtered = product;
    if ($scope.maxPrice > 0) {
      filtered = product.price <= $scope.maxPrice;
    }
    return filtered;
  }
}