Question

我有一个Angular服务，它返回一个具有＆＃34;复合＆＃34;的对象列表。钥匙由两部分组成。我不知道如何编写绑定，以便它们正确地重新绑定现有数据。这是我目前的尝试：＆＃13; ＆＃13; angular.module（＆＃34; app＆＃34;，[]）＆＃13; .controller（＆＃34; fooCtrl＆＃34;，function（）{＆＃13; //来自Angular服务/后端：＆＃13; this.options = [＆＃13; {part1：3，part2：101，displayName：＆＃34;选项3-101＆＃34; }，＆＃13; {part1：4，part2：651，displayName：＆＃34;选项4-651＆＃34; }，＆＃13; {part1：4，part2：999，displayName：＆＃34;选项4-999＆＃34; }＆＃13; ];＆＃13; ＆＃13; this.item = {selectedOption：{part1：4，part2：651}};＆＃13; }）;＆＃13; ＆lt; script src =＆＃34; https：//ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"＆gt;＆lt; / script＆gt;＆＃13; ＆＃13; ＆lt; div ng-app =＆＃34; app＆＃34; ng-controller =＆＃34; fooCtrl as vm＆＃34;＆gt;＆＃13; ＆lt; select ng-options =＆＃34; option.displayName for vm.options中的选项跟踪part1 +＆＃39; - ＆＃39; + part2＆＃34;＆＃13; NG-模型=＆＃34; vm.item.selectedOption＆＃34;＆GT;＆LT; /选择＆GT;＆＃13; ＆LT; HR＆GT;＆＃13; 调试信息：＆＃13; ＆lt; pre＆gt; {{vm.item | JSON}}＆LT; /预＆GT;＆＃13; ＆LT; / DIV＆GT;＆＃13; ＆＃13; ＆＃13; 但是，上述方法不起作用：它应该选择＆＃34;选项4-651＆＃34;在加载时，但没有这样做。请注意，displayName在客户端添加到选项中，但在加载时不在selectedOption中。我不介意如果selectedOption成为一个具有displayName属性的对象，后端将无视它，因为它没有相应的支持属性（我在后端使用C＃，服务器-side DTO没有displayName属性）。重要提示：我尝试这样做而不改变javascript中的加载以及options和selectedOption的结构。特别：我知道我可以在控制器方法的最后给出一些逻辑来重置＆＃34; this.item引用了选项中的实际条目，但在我的实际代码中，它并不是那么简单（因为涉及异步加载选项和selectedOption）。我也明白我可以更改selectedOption和个别选项，以便＆＃34;复合键＆＃34;也可以作为单一复合键＆＃34;例如part1and2：＆＃34; 3-101＆＃34;，但这需要我承认（知道）我有一个XY问题：我不能轻易改变那些结构，因为我在作弊通过将我的UI绑定到来自后端的DTO，而不是使用适当的视图模型来弥补差距。有没有办法通过表达式跟踪来执行此操作，即有没有办法在绑定表达式中优雅地解决这个问题？或者我是否必须在控制器或服务代码中修复此问题？

Answer 1

一个简单的解决方案是在绑定之前重构JavaScript对象，以便它将拥有另一个名为part12的属性，然后通过该属性进行跟踪：）

Answer 2

如果displayName是JSON响应的一部分，那么在控制器中设置选项时，应该将其添加到selectedOption。

这是一个如何在没有它的情况下完成它的工作示例（如果你在默认的selectedOption中有显示名称，那么添加“option as option.displayName ..”）

angular.module("app", [])
  .controller("fooCtrl", function() {
    // This comes from an Angular service / back-end:
    this.options = [
      { part1: 3, part2: 101, displayName: "Option 3-101" },
      { part1: 4, part2: 651, displayName: "Option 4-651" },
      { part1: 4, part2: 999, displayName: "Option 4-999" }
    ];

    this.item = { selectedOption: { part1: 4, part2: 651} };
  });

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script>

<div ng-app="app" ng-controller="fooCtrl as vm">
  <select ng-options="option as ('Option ' + option.part1 + '-' + option.part2) for option in vm.options track by (option.part1 +'-'+ option.part2)"
          ng-model="vm.item.selectedOption"></select>
  <hr>
  Debug info:
  <pre>{{vm.item | json}}</pre>
</div>

使用ng-options和ng-model绑定<select>，其中模型具有复合键

2 个答案: