CODEWITHSUNDEEP
angularjsfilteringangular-ngmodel
Useer
Useer

Reputation: 61

custom data filtering with ng-repeat - implement ng-model

I have edited my code and moved the filtering to my controller

<div class="tab t-1" 
     ng-class="{'active' : legals.activeTab === 1}" 
     ng-show="legals.activeTab === 1">
  <br>
    <label>
      Sort by
      <select ng-model="sortProp" class="input-medium">
        <option value="price">price</option>
        <option value="minutes">minutes from the nearest station</option>
      </select>
   </label>
    <select ng-model="locationFilter" ng-options="l as l for l in found">
      <option value="">all</option>
    </select>
    <div class="form-group">
      <input type="checkbox" ng-click="findRecent()" ng-checked=""/> from the last 7 days
    </div>
  <div ng-repeat="value in all | filter: recentFilter | orderBy:sortProp">
    <ul>
      <li><strong>{{value.id}}</strong></li>
      <li><strong>{{value.address}}</strong></li>
      <li>city: {{value.city}}</li>
      <li>postcode: {{value.postcode}}</li>
      <li>price: {{value.price}}</li>
      <li>num_of_beds: {{value.num_of_beds}}</li>
      <li>{{value.type}}</li>
      <li>{{value.minutes}}</li>
      <li>{{value.added}}</li>
    </ul>
  </div>
</div>

I moved the filter code to my controller and trying to use this in html

var isContractEndDate = function(endDate) {
  var DAYS_UNTIL_END = 8;

  endDate = new Date(endDate);
  var lastDate = new Date(new Date().setDate(new Date().getDate() - DAYS_UNTIL_END));

  if (endDate > lastDate) {
    return true;
  }
  return false;
};

$scope.foundRecent = [];
$scope.lookup = {};

$scope.findRecent = function() {
  angular.forEach($scope.all, function(value, key) {
    $scope.lookup = value;
    if (isContractEndDate($scope.lookup.added)) {
      $scope.foundRecent.push($scope.lookup);
    }
  });
  return $scope.foundRecent;
};

$scope.recentFilter = function(searchResults) {
  if ($scope.findRecent.length > 0) {
    return searchResults;
  }
};

however It is not filtering as well, I think there is some issue with recentFilter function

Upvotes: 0

Views: 167

Answers (1)

Mikko Viitala
Mikko Viitala

Reputation: 8404

Consider following example.

This filter initially shows all your items but clicking on links applies optional parameter that is passed to your custom filter.

HTML

<body ng-controller="Ctrl">
  <div>
    Current condition: {{ condition ? (condition | json) : 'none' }}
    &nbsp;
    <input type="button" ng-click="condition = null" value="Clear">
  </div>

  <br>
  {{ condition ? 'Filtered items' : 'All items' }}

  <ul ng-repeat="item in items | myFilter:condition">
    <li>
      <span ng-repeat="(key, value) in item">      
        <a href ng-click="setCondition(key, value)">{{ value }}</a>&nbsp;
      </span>
    </li>
  </ul>
</body>

JavaScript

angular.module('app', [])

.controller('Ctrl', function($scope) {
  $scope.items = [{
    name: 'Mike',
    gender: 'M',
    city: 'London'
  },{
    name: 'Jake',
    gender: 'M',
    city: 'Helsinki'
  },{
    name: 'Cindy',
    gender: 'F',
    city: 'Helsinki'
  }];

  $scope.setCondition = function(key, value) {
    $scope.condition = {
      key: key,
      value: value
    };
  };
})

.filter('myFilter', function() {
  return function(data, condition) {
    if (!condition) {
      return data;
    } else {
      var filtered = [];
      angular.forEach(data, function(current) {
        if (current[condition.key] === condition.value) {
          this.push(current);
        }
      }, filtered);
      return filtered;
    }
  };
});

imgur

Related plunker here https://plnkr.co/edit/GHOpSw

Upvotes: 1

Related Questions