在angular-ui-select中将$index绑定到ng-model

Question

我试图使用ui-select指令将$index绑定到ng-model，但没有成功。

<ui-select ng-model="selected.m">
    <ui-select-match>
      <span ng-bind="$select.selected.name"></span>
    </ui-select-match>
    <ui-select-choices repeat="$index as choice in itemArray">
      <span ng-bind="choice + '' + $index"></span>
    </ui-select-choices>
  </ui-select>

在上面的模板中，itemArray是一个月份名称数组，在从下拉列表中选择任何月份时，我希望将其$index绑定到ng-model (即.'selected.m')。

我已经让this plunker准备好了。

Answer 1

我找到了解决这个问题的方法：

  <ui-select ng-model="dummy"  ng-change="selected.m=itemArray.indexOf(dummy)">
    <ui-select-match>
      <span ng-bind="$select.selected.name"></span>
    </ui-select-match>
    <ui-select-choices repeat="choice in itemArray">
      <span ng-bind="choice + '/' + $index"></span>
    </ui-select-choices>
  </ui-select>

这是必要的，因为$index仅在表达式的track by或循环内部可用。此外，AngularJS是一个框架，它希望你操纵对象，而不是像以前那样索引，这就是为什么我认为ng-repeat/ng-options不是为此而设计的。

Answer 2

如果你想要的只是$index，那么你可以这样做：

<ui-select-choices repeat="$index in itemArray">
  <span ng-bind="itemArray[$index] + '' + $index"></span>
</ui-select-choices>

这会将模型设置为$index，这将更新您的ng- $select.selected。

<pre> {{ selected }} </pre>

<ui-select ng-model="selected.m">
  <ui-select-match>
    <span>{{$select.selected}}</span>
  </ui-select-match>
  <ui-select-choices repeat="$index in itemArray">
    <span ng-bind="itemArray[$index] + '' + $index"></span>
  </ui-select-choices>
</ui-select>

Answer 3

<ui-select ng-model="vm.mySelectedCountry" title="Choose a country" ng-required="true"> 
        <ui-select-match placeholder="">{{vm.countries[vm.mySelectedCountry].countryName}}</ui-select-match>
        <ui-select-choices repeat="$index in vm.countries| filter: $select.search">
                <span ng-bind-html="vm.countries[$index].countryName | highlight: $select.search"></span>
        </ui-select-choices>
</ui-select>