[SOLVED] Angular custom search filter

Angular custom search filter

I need to create a custom search filter for this scope. I tried the default filter function , doesn't works, Because I displayed status as string in HTML and it is not filtered the way I want it. If I type Normal in the textbox, nothing happens because the data is 0, 1 and 2. And if I search the purchase time which is in 2016/05/16 format cannot search also.

$scope.orderHistory = {[
    "purchaseTime": 1437536718345,
    "status": 1,
]};
app.filter('filterSearch', function () {
  //what to do here??
});


<input type="text" ng-model="searchReview">

<div dir-paginate="order in orderHistory|filterSearch:searchReview">
<ul>
 <li><p class="table-data2-h">{{ order.purchaseTime | date : 'yyyy/MM/dd'}} </p></li>
<li>
<span ng-if="order.status == 0 ">Stable</span>
<span ng-if="order.status == 1 ">Normal</span>
<span ng-if="order.status == 2 ">Serious</span>
</li>
</div>

Solution

At first, I saw some mistakes on your code, you can compare it below.

I'd suggest you to create a simple function to parse your properties accordingly your requirements only on initilization (which one for sure will be better to parse everytime when than custom filter is called), then you can use the normal filter.

See it working:

(function() {
  'use strict';

  angular
    .module('app', [])
    .constant('STATUS', {
      0: 'Stable',
      1: 'Normal',
      2: 'Serious'
    })
    .controller('MainCtrl', MainCtrl);

  MainCtrl.$inject = ['$scope', 'STATUS'];

  function MainCtrl($scope, STATUS) {
    $scope.orderHistory = [
      {
        "purchaseTime": 1437536718345,
        "status": 1
      },
      {
        "purchaseTime": 1431236718345,
        "status": 0
      },
      {
        "purchaseTime": 1099536718345,
        "status": 2
      },
      {
        "purchaseTime": 1439744718345,
        "status": 1
      }
    ];

    function parseProperties() {
      $scope.orderHistory.map(function(order) {
        // You can do it with switch statement
        // switch (order.status) {
        //   case 0:
        //     order.status = 'Stable';
        //     break;
        //   case 1:
        //     order.status = 'Normal';
        //     break;
        //   case 2:
        //     order.status = 'Serious';
        //     break;
        // }

        // or using a constant that you can define above
        order.status = STATUS[order.status];

        order.purchaseTime = new Date(order.purchaseTime).toLocaleDateString();
        return order;
      });
    }

    parseProperties();
  }
})();

<!DOCTYPE html>
<html ng-app="app">

<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.min.js"></script>
</head>

<body ng-controller="MainCtrl">
  <input type="text" placeholder="Search..." ng-model="searchReview">
  <div ng-repeat="order in orderHistory | filter: searchReview">
    <ul>
      <li>
        <p class="table-data2-h" ng-bind="order.purchaseTime"></p>
      </li>
      <li ng-bind="order.status"></li>
    </ul>
  </div>
</body>

</html>

I hope it helps