Question

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

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

我是Angular的新手。我还没有实现这个目标。

＆＃13;

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": "★★"
    }
  ]
});

＆＃13;

<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>

＆＃13;

Answer 1

根据我的理解，您希望将搜索栏中写入的任何字符更改为★。

我只想添加一个ng-change，它给我ng-model的值，我会用RegExp替换每个字符（正如你所尝试的那样）。

查找以下工作片段：

＆＃13;

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": "★★"
    }
  ]
});

＆＃13;

<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>

＆＃13;

AngularJS替换char用于过滤器

1 个答案: