简体   繁体   English

Angular ui-select绑定到一个属性,但向用户显示另一个

[英]Angular ui-select Bind to one property, but show to user another

This is my html code: 这是我的html代码:

      <ui-select ng-model="eVisitorGuest.ArrivalOrganization" theme="" name="arrivalOrganization" options="{selectedDisplayProperty:Name}">
                                                <ui-select-match placeholder="Organizacija dolaska">{{$select.selected.CodeMI}}</ui-select-match>
                                                {{$select.selected.Name}}
                                                <ui-select-choices repeat="evisitorArrivalOrganization in evisitorArrivalOrganizations | propsFilter: {Name: $select.search}">
                                                    <div ng-bind-html="evisitorArrivalOrganization.Name  | highlight: $select.Name"></div>

                                                </ui-select-choices>
                                            </ui-select> 

I'm saving to database CodeMI Property on arrivalOrganisation object, and everything is fine, angular ui-select binds nicely and selects element in dropdown whose CodeMI property is saved to database. 我将到达的组织对象上的CodeMI属性保存到数据库,一切都很好,角度ui-select很好地绑定并在下拉菜单中选择了将CodeMI属性保存到数据库的元素。 Problem is that I don't want CodeMi property to user but another Name property. 问题是我不想要CodeMi属性给用户,而是另一个Name属性。 How to achive that? 如何做到这一点?

Let's say you have the following structure in your controller: 假设您的控制器具有以下结构:

 $scope.items = [{ name: 'one',
                   value: 1 },
                 { name: 'two',
                   value: 2 },
                 { name: 'three',
                   value: 3 },
                 { name: 'four',
                   value: 4 }];

And you want to show just name property of items. 并且您只想显示项目的名称属性。 You could do the following: 您可以执行以下操作:

<ui-select ng-model="selected" theme="bootstrap" title="Choose Name...">
  <ui-select-match>{{$select.selected.name}}</ui-select-match>
  <ui-select-choices repeat="item.value as item in items track by $index | filter: $select.search">
    <div ng-bind-html="item.name"></div>
  </ui-select-choices>
</ui-select>

Now, dropdown will show name, but when you select one, your $scope.selected will have value of selected item. 现在,下拉列表将显示名称,但是当您选择名称时,$ scope.selected将具有所选项目的值。

I know i'm a "bit" late with the answer, but i hope someone will find it useful. 我知道我对答案晚了一点,但我希望有人会觉得有用。 :) :)

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM