javascript - ng-model 对我来说太过分了。有什么选择只会在按钮点击时更新范围而不是每次都更新吗？

Question

我正在从事一个很大程度上基于表单的项目。有时一个页面中会有大约 1000 个表单元素，用户可以选择动态添加更多元素。

这会导致性能问题。在大多数情况下，每当用户更改输入值时，我都不需要 ng-model 的双向绑定(bind)，但只有当用户单击提交或下一步按钮时，我才必须将值绑定(bind)到范围。

是否有任何简单的方法可以做到这一点，或者应该创建我自己的 ng-model 替代版本？我的目标是减少我页面上的 $watches。

Answer 1

具有 2000 个表单项和 2 路数据绑定(bind)，该表单仍然非常灵敏。如果你真的需要更好的性能，你可以通过添加一个 ngModelOptions 指令来指定你只希望模型在“blur”事件上更新:

ng-model-options="{ updateOn: 'blur' }"

var app = angular.module('app', []);
app.controller('ctrl', function($scope) {
  $scope.items = [];
  for (var i = 0; i < 2000; ++i) {
    $scope.items.push({
      name: 'item ' + i
    });
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.10/angular.min.js"></script>
<div ng-app="app" ng-controller='ctrl'>
  <ul>
    <li ng-repeat="item in items">
      <input type="text" ng-model-options="{ updateOn: 'blur' }" ng-model="item.name" />{{ item.name }}
    </li>
  </ul>
</div>