使用"track by"在angularJS ui.select中映射对象

vno*_*oec 9 angularjs angular-ui

我想使用angular-ui ui.select来填充a multiple dropdown field.我想将选定的对象传递给ng-model并将其映射到我的选项,包含相同结构的对象,但不是来自同一个源:

<div ng-repeat="training in trainings">
    <form class="form-horizontal" role="form">
        <ui-select multiple ng-model="training.skills" theme="select2" ng-disabled="disabled">
            <ui-select-match placeholder="Wähle Skills...">{{$item.name}}</ui-select-match>
            <ui-select-choices group-by="skillTypeGrp" repeat="skill.id as skill in skills | filter: $select.search">
                <span>{{skill.name}}</span>
            </ui-select-choices>
        </ui-select>
    </form>
</div>
Run Code Online (Sandbox Code Playgroud)

带有示例培训的trainings列表ng-repeat如下所示:

[{"description": "",
  "skills": [{"type": "tech",
              "name": "C",
              "id": 194}],
  "id": 1,
  "name": "Test"}]
Run Code Online (Sandbox Code Playgroud)

我的skills列表ui-select-choices包含与以下相同的数据结构training.skills:

[{"type": "tech",
  "name": "C#",
  "id": 194},
 {"type": "tech",
  "name": "Java",
  "id": 197},
 ...]
Run Code Online (Sandbox Code Playgroud)

不幸的是,这不起作用.ui-select清空我training.skills,给我一个空白的选择字段.我知道angularjs无法映射这些对象,如果它们不是来自同一个数组,就像这篇博文中所述.它建议使用track by告诉ui.select哪个属性用于映射两个对象列表,但是如果我将该ui-select-choices行更改为:

<ui-select-choices group-by="skillTypeGrp" repeat="skill.id as skill in skills track by skill.id | filter: $select.search"> 
Run Code Online (Sandbox Code Playgroud)

没有什么变化.有没有可能让它运行而不用像他们的id那样替换我的对象,就像单个属性绑定示例所暗示的那样?

小智 0

如果我没记错的话,你正在尝试将整个对象与其 id 进行比较。

您是否尝试过使用:

<ui-select-choices group-by="skillTypeGrp" repeat="skill in skills | filter: $select.search">
    <span>{{skill.name}}</span>
</ui-select-choices>
Run Code Online (Sandbox Code Playgroud)

请注意,我从重复中删除了“skill.id”。我认为通过这种方式你应该比较对象并希望它会起作用。

否则,我将保留 ui-select-choices,因为您拥有它,并在 ui-select 中传递一组 ID(选定的训练)以匹配列表。当然,这意味着每次发生变化时,您都需要进行更多编码来更新技能数组。

希望能帮助到你。