Question

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

<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（即'。' .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仅在表达式的轨道中或循环内可用。此外，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>

这会将$ select.selected设置为$ index，这是更新ng-model的内容。

<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>

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

3 个答案: