在 AngularJS 中，ng-model-options 指令可以用来细化 ng-model 的行为。它允许我们根据自己的需要来设置模型的行为，例如 debounce、trackBy 等。
debounce
debounce 表示“防抖动”，是 AngularJS 表单中的一个非常实用的功能。它主要是用来解决用户输入较快时，不必要的 API 请求问题。通过使用 debounce，我们可以将用户输入从连续的变化优化为一次操作，从而更好地控制 API 请求的频率。
语法：
ng-model-options="{ debounce: <时间> }"示例：
<input type="text" ng-model="vm.search" ng-model-options="{ debounce: 500 }">这段代码将会在用户每一次输入完成 500 毫秒后才开始请求 API 接口，从而减少不必要的请求次数。
trackBy
trackBy 是 AngularJS 用来减少 DOM 操作的一个指令。它负责跟踪数据模型的变化，并且只渲染变更的部分，从而提升应用程序的性能。
语法：
ng-model-options="{ trackBy: <表达式> }"示例：
<div ng-repeat="data in vm.list track by $index" ng-model-options="{ trackBy: 'data.id' }">
{{ data }}
</div>这段代码中我们可以看到，我们在 ng-repeat 中使用了 ng-model-options 的 trackBy 来跟踪数组对象的变化。通过设置 trackBy 后面的表达式，AngularJS 就可以更精确地判断新旧数组的变化，从而快速渲染出变化的部分数据。
updateOn
updateOn 用于控制模型的更新机制。默认情况下，AngularJS 会在 input 或者 textarea 中的值变化时更新模型。
语法：
ng-model-options="{ updateOn: <事件名称> }"示例：
<input type="text" ng-model="vm.name" ng-model-options="{ updateOn: 'blur' }">这段代码中我们可以看到，我们使用了 ng-model-options 的 updateOn 来控制模型的更新机制。在输入框失焦（blur）时，AngularJS 才会将输入值更新到我们的模型中。
指令的组合使用
当这三个指令组合使用时，效果更佳。
示例：
<input type="text" ng-model="vm.search" ng-model-options="{ debounce: 500, updateOn: 'blur' }">这段代码中，我们将 debounce 和 updateOn 两个指令组合在一起使用。这样我们就可以通过控制输入框的失焦事件确保只有在输入框失焦后才向后端请求相关数据，从而减少了无效请求，优化了系统性能。
总结
ng-model-options 提供了很多有用的选项，可以帮助我们更好地控制数据模型的行为。debounce 可以避免快速输入导致的不必要请求，trackBy 可以减少重复的 Dom 操作降低网页的加载速度，updateOn 可以让我们更有控制地更新模型的行为。综合使用可以提高网站性能，提高用户的使用体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6464194d968c7c53b050122b