Thay đổi mô hình đầu vào từ Số nguyên thành Chuỗi khi thay đổi

Question

Có một loại chức năng giá/xếp hạng giá dựa trên mô hình đầu vào. Khi tải, khi nó được đặt từ chương trình phụ trợ, nó bắt đầu như một số nguyên, nhưng khi bạn nhập vào nó, nó sẽ thay đổi thành một chuỗi. Có cách nào trong Angular để khai báo giá trị của một đầu vào là số nguyên?

HTML:

<input type="text" name="sellPrice" id="sellPrice" class="sell-price" data-ng-model="menu.totalPrice" data-ng-change="updateMenuPriceRange()"required> 

JS:

$scope.updateAggregatePricing(); 

if ($scope.menu.totalPrice === 0) { 
    $scope.menuPriceRange = ""; 
} else if ($scope.menu.totalPrice < 10) { 
    $scope.menuPriceRange = "$"; 
} else if ($scope.menu.totalPrice >= 10 && $scope.menu.totalPrice <= 12.50) { 
    $scope.menuPriceRange = "$$"; 
} else if ($scope.menu.totalPrice >= 12.51 && $scope.menu.totalPrice < 15) { 
    $scope.menuPriceRange = "$$$"; 
} if ($scope.menu.totalPrice >= 15) { 
    $scope.menuPriceRange = "$$$$"; 
} else { 
    $scope.menuPriceRange = ""; 
} 

Answer 1

Tôi biết mình đã trễ nhưng tôi nghĩ mình sẽ đăng câu trả lời này vì người khác vẫn có thể tìm kiếm giải pháp thay thế.

Bạn có thể giải quyết vấn đề này bằng cách sử dụng chức năng liên kết chỉ thị AngularJS. Mã:

var myMod = angular.module('myModule', []); 

myMod.directive('integer', function(){ 
    return { 
     require: 'ngModel', 
     link: function(scope, ele, attr, ctrl){ 
      ctrl.$parsers.unshift(function(viewValue){ 
       return parseInt(viewValue, 10); 
      }); 
     } 
    }; 
}); 

Sau đó, bạn sẽ sử dụng chỉ thị này trên một yếu tố đầu vào để đảm bảo rằng bất kỳ giá trị mà bạn nhập, được phân tách thành một số nguyên. (rõ ràng ví dụ này không hợp lệ hóa đầu vào để đảm bảo rằng những gì đã được nhập thực chất là một số nguyên, nhưng bạn có thể dễ dàng thực hiện điều này với việc sử dụng các biểu thức thông thường ví dụ)

<input type="text" ng-model="model.value" integer /> 

Thông tin thêm về chủ đề này có thể được tìm thấy trên tài liệu AngularJS trên biểu mẫu, ngay bên cạnh phần "Xác thực tùy chỉnh": http://docs.angularjs.org/guide/forms.

Edit: Cập nhật parseInt() gọi để bao gồm các radix 10, theo đề nghị của adam0101

Answer 2

Có, sử dụng đầu vào của loại number:

<input type="number" name="sellPrice" ...> 

Answer 3

Đã kết thúc phân tích các mô hình như một số nguyên trước khi có điều kiện của tôi.

$scope.menu.totalPrice = parseInt($scope.menu.totalPrice, 10); 

Answer 4

Rất giống với câu trả lời chấp nhận từ Yanik, ngoại trừ tôi đã cố gắng đó và nó đã không làm việc. Tuy nhiên, This version from the AngularJS documentation hoạt động hoàn hảo cho tôi.

.directive('stringToNumber', function() { 
    return { 
     require: 'ngModel', 
     link: function(scope, element, attrs, ngModel) { 
      ngModel.$parsers.push(function(value) { 
      return '' + value; 
      }); 
      ngModel.$formatters.push(function(value) { 
      return parseFloat(value); 
      }); 
     } 
     }; 
    });