Định dạng tiền tệ Angularjs trong hộp nhập liệu với mô hình ng: cách nhận $ formatters để kích hoạt trên mỗi đầu vào

Question

Tôi đã tìm kiếm ở mọi nơi cho điều này. Mỗi tràn ngăn xếp có câu trả lời, nó không thực sự hoạt động. Tương tự với bất kỳ ví dụ hoặc ví dụ về nhóm từ google cho góc bao gồm các tài liệu.

Có vẻ đơn giản. Tôi muốn một hàm được gọi trên đầu vào cho mỗi phím được nhấn bởi người dùng.

đầu vào đơn giản với một ng-mô hình

<input class="form-control" ng-model="model.thisisnotfun" formatter type="text" required> 

Theo tất cả những gì tôi đọc. $ formatters nên cập nhật giá trị từ mô hình sang khung nhìn gọi bất kỳ hàm nào trong mảng $ formatters. Họ không bao giờ được gọi khi tôi gõ vào hộp đầu vào.

.directive('formatter', function ($filter, $parse) { 
    return { 
     require: 'ngModel', 

     link: function (scope, element, attrs, ngModel) { 

      ngModel.$formatters.push(
       function (value) { 
        console.log('this only gets called on page load'); 
       } 
      ); 
     } 
    }; 
}) 

Tôi biết có rất nhiều cách tùy chỉnh để thực hiện việc này, mà tôi đã thực hiện. Tôi không cần một công việc xung quanh, tôi chỉ muốn biết làm thế nào để sử dụng $ formatters một cách chính xác để "định dạng" dữ liệu xem.

rất rất đơn giản jsfiddle http://jsfiddle.net/fh7sB/4/

Cảm ơn sự giúp đỡ nào.

Answer 1

$formatters được gọi khi mô hình được cập nhật để định dạng giá trị được hiển thị cho người dùng. Số $parsers ngược lại, tức là dịch giá trị từ chuỗi chế độ xem sang mô hình thực, ví dụ: một số.

Trong fiddle chia hai ở đây: http://jsfiddle.net/9tuCz/ nhấn nút; nó thay đổi mô hình và kích hoạt lại $formatters.

Answer 2

Đảm bảo bạn thực sự trả lại giá trị hợp lệ từ các chức năng của mình.

Điều có thể xảy ra là do trình phân tích cú pháp trả lại cùng một giá trị mỗi lần, trình định dạng giả định đầu ra được định dạng sẽ không thay đổi để nó bỏ qua cuộc gọi.

Answer 3

Tôi không thể lấy hàm định dạng $ để hoạt động như tôi muốn. Tôi cũng không thể tìm thấy một ví dụ duy nhất về những gì tôi đang tìm kiếm bất cứ nơi nào vì vậy tôi sẽ đăng câu trả lời của tôi trong trường hợp ai đó cần nó.

Đây là một chỉ thị để định dạng chúng ta tệ trong hộp đầu vào với ng-mô hình

.directive('uiCurrency', function ($filter, $parse) { 
    return { 
     require: 'ngModel', 
     restrict: 'A', 
     link: function (scope, element, attrs, ngModel) { 

      function parse(viewValue, noRender) { 
       if (!viewValue) 
        return viewValue; 

       // strips all non digits leaving periods. 
       var clean = viewValue.toString().replace(/[^0-9.]+/g, '').replace(/\.{2,}/, '.'); 

       // case for users entering multiple periods throughout the number 
       var dotSplit = clean.split('.'); 
       if (dotSplit.length > 2) { 
        clean = dotSplit[0] + '.' + dotSplit[1].slice(0, 2); 
       } else if (dotSplit.length == 2) { 
        clean = dotSplit[0] + '.' + dotSplit[1].slice(0, 2); 
       } 

       if (!noRender) 
        ngModel.$render(); 
       return clean; 
      } 

      ngModel.$parsers.unshift(parse); 

      ngModel.$render = function() { 
       console.log('viewValue', ngModel.$viewValue); 
       console.log('modelValue', ngModel.$modelValue); 
       var clean = parse(ngModel.$viewValue, true); 
       if (!clean) 
        return; 

       var currencyValue, 
        dotSplit = clean.split('.'); 

       // todo: refactor, this is ugly 
       if (clean[clean.length-1] === '.') { 
        currencyValue = '$' + $filter('number')(parseFloat(clean)) + '.'; 

       } else if (clean.indexOf('.') != -1 && dotSplit[dotSplit.length - 1].length == 1) { 
        currencyValue = '$' + $filter('number')(parseFloat(clean), 1); 
       } else if (clean.indexOf('.') != -1 && dotSplit[dotSplit.length - 1].length == 1) { 
        currencyValue = '$' + $filter('number')(parseFloat(clean), 2); 
       } else { 
        currencyValue = '$' + $filter('number')(parseFloat(clean)); 
       } 

       element.val(currencyValue); 
      }; 

     } 
    }; 
})