Question

在intregrating requirejs之前，我已经将angularjs与angular app ..进行了集成，

<input type="number" value="{{cart.quantity}}" ng-model="cart.quantity" />

显示输入框中的值。
但在与requirejs集成后，输入框的type =“number”没有显示我的值.. type =“text”的输入框正在工作。

如何用type =“number”显示值？

由于

Answer 1

我刚遇到同样的问题，并设法解决了这个问题。在我的例子中，模型是通过RESTful $resource获得的，金额的值是作为字符串提供给字段的，而字符串又消除了该值。为了解决这个问题，我最终在我的控制器中执行了以下操作：

$scope.cart = Cart.get(id: $routeParams.id, function(cart){
    cart.quantity = parseFloat(cart.quantity, 10);
});

在更新视图之前将值转换为float。我遇到的一个问题是我的第一次尝试是在$scope.cart.quantity = parseFloat($scope.cart.quantity, 10)之后立即设置get。由于在对get的异步调用完成时覆盖了该值，因此无法正常工作。

$scope.cart = Cart.get(id: $routeParams.id);
$scope.cart.quantity = parseFloat($scope.cart.quantity, 10); // This won't work

希望这有帮助。

Answer 2

您的绑定值为string而不是number。

首先，检查您的服务器是否正在发送number。如果您使用的是PHP，则可能需要使用：

json_encode($array, JSON_NUMERIC_CHECK);

您也可以在客户端使用Javascript将string转换为int或float：

var data = ['1.9', '3']; //these won't be binded to the numbers-only input
data[0] = parseFloat(data[0]); //this will
data[1] = parseInt(data[1]);

这不是一个错误，因为numbers输入只接受有效数字（希望如此）。

注意：

我还尝试将ng-value与整数过滤器绑定，但它不起作用。也许是因为ng-model是找到两者时绑定的那个（是的，它们具有相同的优先级）。

Answer 3

我使用自定义指令解决了这个问题：

angular.module('directives').directive('input', function() {
  return {
    restrict: 'E',
    require: 'ngModel',
    link: function(scope, $el, attrs, ngModel) {
      if ($el.get(0).type === 'number') {
        ngModel.$parsers.push(function(value) {
          return value.toString();
        });

        ngModel.$formatters.push(function(value) {
          return parseFloat(value, 10);
        });
      }
    }
  }
})

这样，在通过restfull资源获取数据时，您无需更改任何HTTP响应。

必要时限制此指令：）

Answer 4

值被ng-model覆盖。删除您的值属性，您的ng-model将使用购物车数量填充输入。

Answer 5

我在输入中添加了一个名称属性，它开始工作

Answer 6

我遇到了同样的问题（实际上输入类型=“范围”），这是我的解决方案，使用自定义指令：

app.directive('ngFloat', function() {
  return {
    restrict: 'A',
    require: 'ngModel',
    link: function(scope, $el, attrs, ngModel) {
        ngModel.$parsers.push(function(value) {
            return parseFloat(value, 10);
        });

        ngModel.$formatters.push(function(value) {
            return value.toString();
        });
    }
  };
});

由于我将指令限制为“ngFloat”属性，因此需要像这样标记输入：

<input ng-float type=.........

我希望这可以帮助未来的访客。

Answer 7

如果 cart.quantity 数据类型不是Number，则无法正常工作。

你需要

$scope.cart.quantity = parseFloat($scope.cart.quantity);

Answer 8

在这种情况下，你的ng-model cart.quantity必须是一个数字，而不是一个字符串。

Answer 9

我找到了这个链接，这对我很有帮助。它创建了一个字符串到数字的指令，你可以用类似的方式附加到数字输入，Ruy Diaz表示：https://docs.angularjs.org/error/ngModel/numfmt

Answer 10

我也遇到了同样的问题并试图找到一个解决方案，对于一个新手而言都很复杂然后我遇到了一个解决方案旧版的棱角分明 https://docs.angularjs.org/api/ng/input/input%5Bnumber%5D

根据哪个ng-model接受一个字符串解决方法是我们定义一个

<强>分钟

和

<强>最大

使用输入类型=＆＃34时的

值;数＆＃34;

它对我有用，我希望它也适用于其他人

Answer 11

奇怪，就我而言，从import UIKit extension Array { /** Randomizes the order of an array's elements. */ mutating func shuffle() { for _ in 0..<10 { sort { (_,_) in arc4random() < arc4random() } } } } // random class QuizViewController: UIViewController { var tasks : [Task] = [] var limitRe:Int = 0 var cards: [Character] = [] var quizName = [String]() var quizfileName = [String]() override func viewDidLoad() { super.viewDidLoad() //get the data from core data getData() for q in 0...tasks.count-1 { let quiz = tasks[q] quizName.append(quiz.name!) quizfileName.append(quiz.filename!) print(quizName, quizfileName) } var quizWord = quizName[0] var countText: Int = (quizWord.characters.count) - 1 for _ in 0...countText {let index1 = quizWord.index(quizWord.startIndex, offsetBy: limitRe) cards.append(quizWord[index1]) limitRe = limitRe + 1 } cards.shuffle() quizPhotoView.image = UIImage(named: "1.jpg") if countText >= 0 {lblChar1.text = "\(cards[0])"} else {lblChar1.text = ""} if countText >= 1 {lblChar2.text = "\(cards[1])"} else {lblChar2.text = ""} if countText >= 2 {lblChar3.text = "\(cards[2])"} else {lblChar3.text = ""} if countText >= 3 {lblChar4.text = "\(cards[3])"} else {lblChar4.text = ""} if countText >= 4 {lblChar5.text = "\(cards[4])"} else {lblChar5.text = ""} if countText >= 5 {lblChar6.text = "\(cards[5])"} else {lblChar6.text = ""} if countText >= 6 {lblChar7.text = "\(cards[6])"} else {lblChar7.text = ""} if countText >= 7 {lblChar8.text = "\(cards[7])"} else {lblChar8.text = ""} } @IBOutlet weak var lblChar1: UILabel! @IBOutlet weak var lblChar2: UILabel! @IBOutlet weak var lblChar3: UILabel! @IBOutlet weak var lblChar4: UILabel! @IBOutlet weak var lblChar5: UILabel! @IBOutlet weak var lblChar6: UILabel! @IBOutlet weak var lblChar7: UILabel! @IBOutlet weak var lblChar8: UILabel! @IBOutlet weak var lblTyped: UILabel! @IBOutlet weak var quizPhotoView: UIImageView! func getData() { let context = (UIApplication.shared.delegate as! AppDelegate).persistentContainer.viewContext do { tasks = try context.fetch(Task.fetchRequest()) } catch { print("Failed") } } @IBAction func butChar1(_ sender: UIButton) { if (lblTyped.text!.characters.count) > (quizWord.characters.count) - 1 {lblTyped.text = ""} lblTyped.text = lblTyped.text! + lblChar1.text! if lblTyped.text == quizWord {lblTyped.text = "Good"}} @IBAction func butChar2(_ sender: UIButton) { if (lblTyped.text!.characters.count) > (quizWord.characters.count) - 1 {lblTyped.text = ""} lblTyped.text = lblTyped.text! + lblChar2.text! if lblTyped.text == quizWord {lblTyped.text = "Good"} } @IBAction func butChar3(_ sender: UIButton) { if (lblTyped.text!.characters.count) > (quizWord.characters.count) - 1 {lblTyped.text = ""} lblTyped.text = lblTyped.text! + lblChar3.text! if lblTyped.text == quizWord {lblTyped.text = "Good"}} @IBAction func butChar4(_ sender: UIButton) { if (lblTyped.text!.characters.count) > (quizWord.characters.count) - 1 {lblTyped.text = ""} lblTyped.text = lblTyped.text! + lblChar4.text! if lblTyped.text == quizWord {lblTyped.text = "Good"}} @IBAction func butChar5(_ sender: UIButton) { if (lblTyped.text!.characters.count) > (quizWord.characters.count) - 1 {lblTyped.text = ""} lblTyped.text = lblTyped.text! + lblChar5.text! if lblTyped.text == quizWord {lblTyped.text = "Good"}} @IBAction func butChar6(_ sender: UIButton) { if (lblTyped.text!.characters.count) > (quizWord.characters.count) - 1 {lblTyped.text = ""} lblTyped.text = lblTyped.text! + lblChar6.text! if lblTyped.text == quizWord {lblTyped.text = "Good"}} @IBAction func butChar7(_ sender: UIButton) { if (lblTyped.text!.characters.count) > (quizWord.characters.count) - 1 {lblTyped.text = ""} lblTyped.text = lblTyped.text! + lblChar7.text! if lblTyped.text == quizWord {lblTyped.text = "Good"}} @IBAction func butChar8(_ sender: UIButton) { if (lblTyped.text!.characters.count) > (quizWord.characters.count) - 1 {lblTyped.text = ""} lblTyped.text = lblTyped.text! + lblChar8.text! if lblTyped.text == quizWord {lblTyped.text = "Good"}} }删除了min和max属性。我的意思是input type="number"工作!!

似乎与上面发布的arpit kumar完全相反。

AngularJS版本：1.6.1

Answer 12

angular
  .module('xxx')
  .directive('ngFloat', function () {
    return {
      restrict: 'A',
      require: 'ngModel',
      link: function (scope, $el, attrs, ngModel) {
        ngModel.$formatters.push(function (value) {
          return +value
        });
      }
    };
  });

输入类型'数字'的ng-model不工作angularjs

12 个答案: