如何将 ng-model 绑定到所选项目的"value"以进行 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。到整个国家项目的国家代码。例如，如果我选择阿富汗，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。值作为完整的项，而不是值和标签。

所以重复部分:<ui-select-choices repeat="item.value as item in countries成功了。

Answer 2

直接修改

fm.countryCode = {{fm.countryCode}}

fm.countryCode = {{fm.countryCode.value}}

Answer 3

Ok replace

 fm.countryCode = {{fm.countryCode}}

 fm.countryCode = {{fm.countryCode.value}}

见柱塞http://plnkr.co/edit/EoBl4YZ6QfnJdHfOMM10?p=preview

Answer 4

在我看来，一个更优雅的解决方案是:

改变:

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

:

<select ng-options="country.value as country.label for country in countries" ng-model="fm.countryCode"> </select>

plunkr