AngularJS - 在输入中使用ngModel显示解密值

时间:2014-10-20 04:22:48

标签: angularjs

我们说我有一组带有加密值的对象:

// the values are encrypted
$scope.fruits = [
    [0]: {'name':'as987s=', 'size':'Hjh6Gj0'},
    [1]: {'name':'3fss87s=', 'size':'kooi9huy8g'},
    [2]: {'name':'asdd21s=', 'size':'juHg7g'},  
];

// returns an encrypted data
$scope.decryptData = function(param) {
    return decrypt(param);
};

如何在文本框中显示解密的值?

我在我的观点中尝试过这样的事情:

<div ng-repeat="fruit in fruits">
    {{ decryptData(fruit.name) }}
    <input type="text" ng-model="fruit.size" />
</div>

它在标签上正常工作,但我怎么能为文本输入做同样的事情呢?

1 个答案:

答案 0 :(得分:2)

以下是fiddle

的链接

创建一个指令,让我们说解密信息并在输入时使用它。

myApp.directive('decryptInfo', ['decryptService', function(decryptSvc){
   return {
     require: 'ngModel',
     link: function(scope, element, attrs, ngModelController) {   
         ngModelController.$formatters.push(function(data) {
         return decryptSvc.decrypt(data); //decrypted
        });
      }
   };
 }]);

HTML:

<div ng-repeat="fruit in fruits">
    {{ decryptData(fruit.name) }}
    <input type="text" ng-model="fruit.size" decrypt-info />
</div>