How to remove the filter on only the clicked item in ng-repeat?

Question

In my application, I am masking the serial numbers by default (using a custom filter in angular). When the user clicks on 1 particular masked serial number, the mask needs to be removed.

Here is my code so far:

 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(''); }; });

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

How do I achieve this?

Answer 1

Not totally sure I understand issue but you can use an argument in the filter and for simplicity bind it to a property of the object

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('');
    };
  });

Then in html do something like:

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

How to remove the filter on only the clicked item in ng-repeat?

Question

1 answers

solution1
1 ACCPTED 2016-02-19 01:35:37

How to remove the filter on only the clicked item in ng-repeat?

Question

1 answers

solution1 1 ACCPTED 2016-02-19 01:35:37

solution1
1 ACCPTED 2016-02-19 01:35:37