AngularJS：在輸入顯示格式化模型值時不聚焦

說我有等的輸入：AngularJS：在輸入顯示格式化模型值時不聚焦

<input type="text" ng-model="myVariable">

隨着600.23目前的值。 $ scope.myVariable的值應該始終爲600.23（除非用戶更改了值）我希望輸入在輸入沒有焦點時顯示$ 600.23，但是當使用給出輸入焦點時，我希望它切換到未格式化的ng-model值600.23供用戶編輯。一旦用戶完成編輯並取消焦點，我希望顯示的值再次以貨幣格式顯示。基本上類似於電子表格應用程序中格式化單元格的工作方式。爲了簡化問題，無視輸入驗證。

這可以用jQuery很簡單地完成，但是可以用純的AngularJS來完成嗎？

來源

2013-10-11 AlliterativeAlice

這是我創建的依賴於jQuery的解決方案（更糟的是，EVAL！）：

angular.module('app', []) 
.directive('displayFormat', function() { 
    return function (scope, element, attr) { 
     $(element).focus(function() { 
      $(this).val(eval('scope.' + $(this).attr('ng-model'))); 
     }); 
     $(element).blur(function() { 
      var modelValue = parseFloat(eval('scope.' + $(this).attr('ng-model'))); 
      if (attr["displayFormat"] == 'currency') $(this).val('$' + modelValue.numberFormat(2)); 
      if (attr["displayFormat"] == 'percentage') $(this).val((modelValue * 100) + '%'); 
     }); 
    }; 
}); 

Number.prototype.numberFormat = function (decimals, dec_point, thousands_sep) { 
    dec_point = typeof dec_point !== 'undefined' ? dec_point : '.'; 
    thousands_sep = typeof thousands_sep !== 'undefined' ? thousands_sep : ','; 

    var parts = this.toFixed(decimals).toString().split('.'); 
    parts[0] = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, thousands_sep); 

    return parts.join(dec_point); 
}

然後在控制器：

$scope.$watch(function() { 
    $('input').not(':focus').blur(); 
});

然後輸入字段：

<input type="text" ng-model="myVariable" display-format="currency">

（在我的實際應用中，除了貨幣外，我還將實施其他顯示格式選項）

雖然我真的很想擁有一個非jQuery解決方案。

來源

2013-10-11 19:31:01 AlliterativeAlice

您可以使用ngBlur ang ngFocus來切換值。創建函數，它將添加$並在ngBlur上觸發它，並將其刪除。

來源

2013-10-11 18:27:29

我在研究這個問題時看到了這些，但我不清楚如何使用它們來改變顯示值，同時保持myVariable的值不變。 – AlliterativeAlice

不，你不能在處理模型時檢查是否有$ –

AngularJS：在輸入顯示格式化模型值時不聚焦

回答

相關問題