Question

我在将用户数据输入到使用Angular ng-repeat显示的有序字段时遇到了一些问题。

假设您希望某些值显示在列表中，并且这些值可能是可编辑的。同时，您正在订购该数据。由于ng-model的工作原理和Angular reflow cycle，如果一个输入的值在编辑时超过另一个输入，你会发现自己在错误的字段上输入。看看这个例子：

＆＃13;

var app = angular.module('app', []);
app.directive('myrow', Row);
app.controller('controller', Controller);


function Controller () {
  this.order = '-value';
  this.inputs = [
    {value: 1, tag: "Peas"},
    {value: 2, tag: "Apples"},
    {value: 3, tag: "Potatos"}
  ];
}
function Row($compile, $sce){
  var linker = function($scope, $element, $attrs){
    var template = '<div>- <input type="number" ng-model="data.value"><span ng-bind="data.tag"></span></div>';
		a = $element.html(template);
		$element.html(template);
    $compile($element.contents())($scope);
  }
  return {
    restrict: 'AE',
    replace: true,
    scope: {
        data: "="
    },
    link: linker
    }
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script>
<div ng-app="app" ng-controller="controller as ctrl">
  List:
   <div ng-repeat="item in ctrl.inputs | orderBy: ctrl.order">
    <div myrow data="item"></div>
  </div>

</div>

＆＃13;

我做了这个简化的例子，因为原始组件有数千行和一些依赖。在这里，这个问题并没有完全复制，但是，当你写作时，有时输入会失去焦点，例如，当没有编译指令时（这在我的实际代码中是完全必要的）没有发生的事情。关于如何解决这个问题的任何想法？是否可以在更改时激活ng-model更新而不是用户键入。

Answer 1

您可以使用ng-model-options及其updateOn属性，以便仅在用户离开该字段时更新您的模型。

您可以在此处查看其工作原理：https://docs.angularjs.org/api/ng/directive/ngModelOptions（“＆＃39;触发和去抖动模型更新＆＃39;部分中有一个示例”

示例：

<input ng-model-options="{ updateOn: 'blur'}" />

在Angular

1 个答案: