【问题标题】:AngularJS ng - repeat, ng - model on input text strange behaviourAngularJS ng - 重复,ng - 输入文本奇怪行为的模型
【发布时间】:2017-01-23 03:00:00
【问题描述】:

我是AngularJS的新手,我试着做下面的代码

var app = angular.module('SomeApp', []);

app.controller('QuotationController', function($scope) {

   $scope.init = function(){
     $scope.chargableDescription = [""];
     $scope.chargablePrice = [];
     $scope.chargableQuantity = [];
     $scope.chargableTotal = [];

   }

   $scope.chargableInput = function($last){

     if ( $last ) {
       $scope.chargableDescription.push([""]);
     }
   }
});

基本上,我在这里想要实现的是当用户在最后一个 chargableDescription 字段上输入内容时插入整个输入组。

      <div class="chargable-group" ng-repeat="item in chargableDescription" >

            <div class="col-md-3">
                 <label class="form-control-label" for="l2" id="chargable-label">Chargable Item</label>
            </div>

            <div class="col-md-9" id="chargable-header">
                 <textarea name="chargable[]" class="form-control dynamic chargable" placeholder="Chargable Description" ng-model="chargableDescription[$index]" ng-keypress="chargableInput($last)"> </textarea>
                 <br>
                 <input type="number" class="form-control" step="0.01" name="chargable-price-1" placeholder="Chargable Price" ng-model="chargablePrice[$index]">
                 <br>
                 <input type="number" class="form-control" name="chargable-quantity-1" placeholder="Chargable Quantity" ng-model="chargableQuantity[$index]">
                 <br>
                 <input type="number" class="form-control" step="0.01" name="chargable-total-1" placeholder="Chargable Total" readonly ng-model="chargableTotal[$index]" >
            </div>

      </div>

它确实有效,但是,我想知道为什么当我在 textarea 上进行任何输入时,一旦我输入一个字符,光标就会消失。 如何消除这种行为以及导致这种行为的因素是什么?

更新:

已解决 我添加了 ng-model-options = { updateOn : 'blur' } 似乎解决了问题

【问题讨论】:

  • 请删除该问题,否则它总是显示为未回答,并且会浪费任何人开始阅读它以解决问题的时间。或者,在标题中写下 [已解决]。

标签: javascript angularjs angularjs-ng-repeat angularjs-ng-model


【解决方案1】:

它适用于我https://plnkr.co/IV9t4fhln5v3l81NHaPC

你的 Angular 版本是什么?

(function() {

  'use strict';

  var app = angular.module('SomeApp', []);

  app.controller('QuotationController', function($scope) {

    $scope.init = function() {
      $scope.chargableDescription = [""];
      $scope.chargablePrice = [];
      $scope.chargableQuantity = [];
      $scope.chargableTotal = [];

    }

    $scope.chargableInput = function($last) {

      if ($last) {
        $scope.chargableDescription.push([""]);
      }
    }

    $scope.init();
  });


})();

【讨论】:

  • 我可以看到它在上面的链接上工作,但它不适用于我。但是为什么要添加 $scope.init();逻辑之后?那不是刷新初始值吗?我添加了 ng-model-options = { updateOn : 'blur' } 效果很好,但我想知道为什么。你知道为什么吗?感谢您的回答,希望您能向我解释,因为我对 AngularJS 真的很陌生。 @卡尔圣加布里埃尔
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2013-07-03
  • 1970-01-01
  • 2018-02-12
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多