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

Question

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

Move the filter to a function in the controller and call it with the data on click of the button using ng-click — Supradeep
– Supradeep, Commented Jan 13, 2017 at 14:27
I did that however I thought that maybe there is a better solution and I could implement ng-model — Useer
– Useer, Commented Jan 13, 2017 at 14:43

Mikko Viitala · Accepted Answer · 2017-01-13 17:45:42Z

1

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;
    }
  };
});

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

answered Jan 13, 2017 at 17:45

Mikko Viitala

8,4044 gold badges42 silver badges62 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Useer Over a year ago

thank you Mikko I will play with this code and see what I get

Mikko Viitala Over a year ago

Well, maybe you set up a plunker/fiddle?

Useer Over a year ago

I have edited my code and now i have moved all code to controller and trying to make it simple

Collectives™ on Stack Overflow

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

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related