Question

我正在处理使用angular的视图，我注意到ng-repeat中的数字输入会在执行某个操作序列时自动递增。

如果满足以下条件，则会发生这种情况：

使用Angular 1.3及以上版本（未在角度2上测试）
ng-repeat使用orderBy
号码输入使用ng-model-options="{updateOn: 'blur'}"

更新：这些微调控件是webkit的一部分，只出现在Chrome等webkit浏览器中。 IE和Edge不是webkit浏览器，也不会显示微调控件。

如果我使用角度1.2，或者我移除了orderBy或updateOn: 'blur'问题未显示。

我知道我可以通过删除这些功能中的任何一个来修复它，但我不完全理解为什么会发生这种情况。

任何人都可以解释数字输入自动递增的原因吗？

有关重现此问题的步骤，请参阅下面的示例。

＆＃13;

var myApp = angular.module('myApp', []);
myApp.controller('myController', function myController($scope) {
  $scope.items = [{
    'Name': 'Item1',
    'Seq': 0
  }, {
    'Name': 'Item2',
    'Seq': 0
  }];
});

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.0/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap3.3.7/js/bootstrap.min.js"></script>

<div class="alert alert-info">Steps to reproduce:
  <ol>
    <li>Hover over the sequence input for item 1 and press the up arrow once</li>
    <li>Hover over the sequence input for item 2 and press the up arrow once</li>
    <li>The sequence number will now continuously increment</li>
  </ol>
</div>

<div ng-app="myApp" ng-controller="myController">
  <table class="table table-bordered table-striped">
    <tr>
      <th style="width: 50px;">Seq#</th>
      <th style="width: 50px;">Seq</th>
      <th>Item #</th>
    </tr>
    <tr ng-repeat="item in items | orderBy : 'Seq'">
      <td>
        <input class="form-control" type="number" style="width: 100px;" ng-model="item.Seq" ng-model-options="{updateOn: 'blur'}" />
      </td>
      <td>{{item.Seq}}</td>
      <td>{{item.Name}}</td>
    </tr>
  </table>
</div>

＆＃13;

使用orderBy过滤器和updateOn Blur

0 个答案: