AngularJS代替Char以进行过滤器

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

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

我在角度很新。我还没有实现这一目标。

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>

从我所理解的内容中，您想将搜索栏中写入的任何字符更改为 ★。

我只会添加一个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>

相关内容

最新更新

热门标签：