Question

在我的应用程序中，我默认屏蔽了序列号（使用角度自定义过滤器）。当用户点击1个特定的掩码序列号时，需要删除掩码。

到目前为止，这是我的代码：

＆＃13;

var myApp = angular.module('myApp',[]);

myApp.controller('MyCtrl', [ '$scope', function($scope){
  $scope.name = 'Superhero';

  $scope.serialNumbers = [
    {serial: 12345678},
    {serial: 22245678},
    {serial: 33345678},
  ];

    }]);

  myApp.filter('mask', function() {
    return function(input) {
      var inputArray = input.toString().split('');
      for (var i = 2, l = inputArray.length; i < l - 2; i++) {
        inputArray[i] = '*'; // replace
      }
      return inputArray.join('');
    };
  });

＆＃13;

<!DOCTYPE html>
<html>
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
    <meta charset="utf-8">
    <title>JS Bin</title>
  </head>
  <body ng-app='myApp'>
    <div ng-controller="MyCtrl">
      Hello, {{name}}!
      <p>Below are your serial numbers:</p>
      <p ng-repeat="serialNumber in serialNumbers">{{serialNumber.serial | mask}}</p>
    </div>
  </body>
</html>

＆＃13;

我如何实现这一目标？

Answer 1

我不完全确定我理解问题，但您可以在过滤器中使用参数，为简单起见，将其绑定到对象的属性

myApp.filter('mask', function() {
    return function(input, noMask) {
      if(noMask){
          return input;
      }
      var inputArray = input.toString().split('');
      for (var i = 2, l = inputArray.length; i < l - 2; i++) {
        inputArray[i] = '*'; // replace
      }
      return inputArray.join('');
    };
  });

然后在html中做类似的事情：

<p ng-repeat="serialNumber in serialNumbers" 
   ng-click="serialNumber.noMask=!serialNumber.noMask">
      {{serialNumber.serial | mask: serialNumber.noMask }}
</p>

如何仅在ng-repeat中单击的项目上删除过滤器？

1 个答案: