如何将ng-model绑定到ui-select所选项的"值"

Question

请查看以下插件:http://plnkr.co/edit/fc9XcyyYGtAk0aGVV35t？p = preview

  <ui-select ng-model="fm.countryCode" id="countryCode">
      <ui-select-match placeholder="Select a country...">{{$select.selected.label}}</ui-select-match>
      <ui-select-choices repeat="item in countries | filter: $select.search" value="{{$select.selected.value}}">
          <div ng-bind-html="item.label | highlight: $select.search"></div>
          <small ng-bind-html="item.value | highlight: $select.search"></small>
      </ui-select-choices>
  </ui-select>   

我正在尝试使用ui-select将fm.countryCode设置为所选项的值.目前它只是将fm.countryCode设置为整个国家/地区项目.例如,如果我选择阿富汗,fm.countryCode将设置为{"value":"AF","label":"Afghanistan"}.我想要的是"AF".

我是否必须设置$ watch来实现这一目标,还是有更优雅的解决方案？

Answer 1

您可以将您的ui-select更改为:

<ui-select ng-model="fm.countryCode" id="countryCode">
  <ui-select-match placeholder="Select a country...">{{$select.selected.label}}</ui-select-match>
  <ui-select-choices repeat="item.value as item in countries | filter: $select.search" value="{{$select.selected.value}}">
      <div ng-bind-html="item.label | highlight: $select.search"></div>
      <small ng-bind-html="item.value | highlight: $select.search"></small>
  </ui-select-choices>
</ui-select>  

这将把item.value作为完整项,而不是值和标签.

所以重复部分:<ui-select-choices repeat="item.value as item in countries诀窍.