내 응용 프로그램에서 기본적으로 일련 번호를 마스킹하고 있습니다 (각도의 사용자 지정 필터 사용). 사용자가 마스킹 된 특정 일련 번호 1 개를 클릭하면 마스크를 제거해야합니다.
지금까지 내 코드는 다음과 같습니다.
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>어떻게해야합니까?
내가 문제를 이해하고 있는지는 확실하지 않지만 필터에서 인수를 사용하고 간단하게 객체의 속성에 바인딩 할 수 있습니다.
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>
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다