ng-options 的最后一个元素答案

【问题标题】：Last element of ng-optionsng-options 的最后一个元素
【发布时间】：2014-09-22 08:30:37
【问题描述】：

给定以下代码：

<select label="someSelect" 
        ng-model="someModel" 
        ng-options="p as p.bar group by p.foo for p in ps">
</select>

有没有办法知道选择何时填充了相应的选项值？

我知道这可以在 ng-repeat 指令中实现，创建一个自定义指令并检查 scope.$last 属性，但这在这种情况下似乎不起作用。

这背后的想法是我希望能够使用 Select2 插件 (http://ivaynberg.github.io/select2/)。由于someModel 不匹配所提供选项的任何值，ng-options 默认添加一个额外的<option value="?"></option>（正如 Josep 已经指出的那样）。一种可能的解决方案是使用有效值在控制器中初始化此范围属性 (someModel)，但提供的数据（在本例中为 ps）可能为空，因此无法初始化值。

我的第一种方法是知道选择渲染何时完成，以便我可以删除额外的选项值并随着模型的变化一次又一次地正确初始化 selext 框。

真的有可能吗？有没有更好的方法来实现这一点？

【问题讨论】：

那么，您想知道 ng-options 指令何时完成渲染项目？我假设您想知道它何时完成渲染以便重新计算位置或类似的东西，对吗？
@Josep 就是这样。我需要知道它，以便我可以相应地修改 DOM 以使某些插件工作 (ivaynberg.github.io/select2)，因为 ng-options 默认情况下会在每次模型更改时添加一个空选项值。
那么，我很抱歉，但我担心这是一个 x/y 问题。你最好解释一下你真正的问题是什么。此外，“ng-options 在每次模型更改时默认添加一个空选项值”是不正确的，当您的模型的值与您的选项的任何可能值都不匹配时，ngOptions 将添加一个默认的空选项。
@Josep 确实，我想简化我的问题。我会及时更新的，谢谢。
@Josep 查看更新后的问题，谢谢。

标签： javascript angularjs angularjs-directive jquery-select2

【解决方案1】：

我可能是错的，但我认为你想要的是这样的：

为了使用 select2 的指令（经验法则：当你想集成外部插件时总是使用指令）：

.directive('select2', function($timeout) {
  return {
    restrict: 'A',
    link : function (scope, element, attrs ) {
      $timeout(function(){element.select2();});
    } 
  };
});

您的 HTML：

<select 
ng-init="studentSelected=students[0]" 
ng-model="studentSelected" 
ng-options="student.name group by student.class for student in students" 
select2>
</select>

Example

另外，值得一提的是，由于您使用的是需要jQuery 的select2，因此您在指令中收到的element 不是jqLite 对象，而是jQuery 对象，这就是为什么你可以在指令中做element.select2()。

【讨论】：

这就像一个魅力，感谢 Josep :) 作为评论，ng-init 似乎不是必需的。也感谢您的解释！