AngularJS 替换过滤器的字符

Question

我想将搜索框中的任何字符替换为★字符，因为在我的数据数组中，我所有的星数据都是这样存储的。

我在下面添加了我的代码。

我是 Angular 的新手。我还没有做到这一点。

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>

Answer 1

据我了解，您想将搜索栏中的任何字符更改为 ★。

我只想添加一个 ng-change 给我 ng-model 的值，我会使用 RegExp 替换每个字符（如您所试）。

在下面找到工作片段：

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>

AngularJS 替换过滤器的字符

AngularJS replace char for filter

angularjs

angularjs-filter