为什么ng选项指令需要ng模型

Why ng-model is required for ng-options directive

本文关键字：ng 模型 指令 选项 为什么      更新时间：2023-09-26

标记

<div ng-app>
  <div ng-controller="myCtrl">
    <select ng-options="i for i in [1,2,3]"></select>
  </div>
</div>

使用此标记，options不会填充在select中。当我提供ng-model和ng-options时，它会按预期工作。

为什么ng-options需要ng-model来填充选项？

ngOptions需要模型来确定默认情况下应选择哪个选项，或者在选择更改时写入所选对象/值的模型。

如果没有ngModel指令，则很难访问所选的值，并且当人们查询DOM以确定值或为此编写自己的指令时，可能会导致错误的实践代码。在这两种情况下，这都不是理想的，因为这类事情是Angular form元素指令的关键思想。

另外，不要忘记ngOptions和ngModel的结合允许开发人员将整个对象绑定为select元素的"值"，如果没有ngModel，这将很棘手。

最后，如果出于某种原因不想选择任何模型（尽管这没有什么意义），可以使用ngRepeat渲染选项。

如果没有模型绑定到选择，那么在选择一个选项后，选择将写入到哪里？

至于选项没有显示的原因，你可以看到源代码：

https://github.com/angular/angular.js/blob/master/src/ng/directive/ngOptions.js#L355

return {
    restrict: 'A',
    terminal: true,
    require: ['select', '?ngModel'],
    link: function(scope, selectElement, attr, ctrls) {
      // if ngModel is not defined, we don't need to do anything
      var ngModelCtrl = ctrls[1];
      if (!ngModelCtrl) return;

链接函数会被截断，并且不会创建所有渲染函数。

来自文档：

当模型需要绑定到非字符串值时，应使用ngOptions

ngOptions的关键是为模型提供值，而不仅仅是渲染option元素。因此，在没有ngModel的情况下使用是没有意义的。

相关文章：