AngularJS replace char for filter

I want to replace any character as ★ character in my search box becuase in my data array, all my star data are stored like that.

I've added my code below.

I'm very new in Angular. I haven't achieved this yet.

var app = angular.module("myApp", []);

angular.module('myApp')
  .directive('hide-characters', HideCharactersDirective);

function HideCharactersDirective() {
  return {
    restrict: 'A',
    require: ['ngModel'],
    link: function(scope, element, attrs, ctrls) {
      var ngModelController = ctrls[0];

      ngModelController.$formatters.push(function(viewValue) {
        return viewValue.replace(/./g, '*');
      });
    }
  };
}


app.controller("myCtrl", function($scope) {
  $scope.records = [{
      "Name": "Alfreds Futterkiste",
      "Star": "★★★"
    },
    {
      "Name": "Berglunds snabbköp",
      "Star": "★"
    },
    {
      "Name": "Centro comercial Moctezuma",
      "Star": "★★★★"
    },
    {
      "Name": "Ernst Handel",
      "Star": "★★"
    }
  ]
});

<html lang="">

<head>
  <base target="_blank">
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title></title>


  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
</head>

<body ng-app="myApp">


  <table ng-controller="myCtrl" border="1">
    <input hide-characters ng-model="search.Star" type="text">

    <tr ng-repeat="x in records | filter:search">
      <td>{{x.Name}}</td>
      <td>{{x.Star}}</td>
    </tr>
  </table>
</body>

</html>

Solution

From what I understood, you want to change any character written in the search bar to a ★.

I would just add a ng-change that gives me value of ng-model and I would replace every character using RegExp (as you tried).

Find working snippet below:

var app = angular.module("myApp", []);

app.controller("myCtrl", function($scope) {
  $scope.changeValue = function(value) {
    $scope.search.Star = value.replace(/./g, '★')
  }

  $scope.records = [{
      "Name": "Alfreds Futterkiste",
      "Star": "★★★"
    },
    {
      "Name": "Berglunds snabbköp",
      "Star": "★"
    },
    {
      "Name": "Centro comercial Moctezuma",
      "Star": "★★★★"
    },
    {
      "Name": "Ernst Handel",
      "Star": "★★"
    }
  ]
});

<html lang="">

<head>
  <base target="_blank">
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title></title>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
</head>

<body ng-app="myApp" ng-controller="myCtrl">

  <table border="1">
    <input ng-change="changeValue(search.Star)" ng-model="search.Star" type="text">

    <tr ng-repeat="x in records | filter:search">
      <td>{{x.Name}}</td>
      <td>{{x.Star}}</td>
    </tr>
  </table>
</body>

</html>