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将被设置为{＆＃34;值＆＃34;：＆＃34; AF＆＃34;，＆＃34;标签＆＃34;：＆＃34;阿富汗＆＃34; }。我想要的是＆＃34; AF＆＃34;。

我是否必须设置$ 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就可以了。

Answer 2

只需更改

fm.countryCode = {{fm.countryCode}}

的

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

Answer 3

好的替换

 fm.countryCode = {{fm.countryCode}}

到

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

参见plunker http://plnkr.co/edit/EoBl4YZ6QfnJdHfOMM10?p=preview

Answer 4

IMO会有一个更优雅的解决方案：

改变这个：

<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

如何将ng-model绑定到＆＃34;值＆＃34;选择的项目为ui-select

4 个答案: